I have a bootstrap header on this site that you can see here: http://www.healthunit.org/checkeredflags/index.html
I am wondering if there is a way for me to have the image stop expanding after, say x pixels and have it static, with black bars on each side. That is, the image would stay the same size but as the screen got stretched, a black background would show behind the image as needed. Here is the jumbotron:
<header>
<div class="jumbotron">
<img class="img-responsive image" src="Images/CheckFlag.png" alt="Checkered Flags Banner">
</div>
You can use max-width css property.
<div class="jumbotron" style="background-color: black;">
<img class="center-block image img-responsive" src="Images/CheckFlag.png" alt="" style="max-width: 400px;">
</div>
Related
I am using materialize css for placing images inside cards
But the images seem to get cut at half
<div class="card teal lighten-3 large hoverable">
<div class="card-image">
<img id="axolotl-api-picture" style="background-size: 100% 100%;" alt="cute axolotl">
</div>
<div class="card-action teal">
<a class="prev axolotl-api-picture">Previous</a>
<a class="next axolotl-api-picture">Next</a>
</div>
</div>
The current image:
img
The orginal image(i.e. what I want):
img
So you see the image is not completely showing
Try this:
style="background-size: cover;"
Also I think you need to change the height of this div <div class="card-image">.The image is taking up the whole space available to it.
I am working on a code on the online training I am taking on bootstrap. I am following the exact steps as mentioned in the training but in my result the height of the row I am creating is much higher than it should be.
So the training is on Bootstrap 3, but I am using bootstrap 4 (in case that is important information). I create a row and then two columns each col-md-2 for img and then put images on them. But then the height of the columns are much higher than what it should be.
<div class="container">
<div class="row">
<img src="images/carousel-1.jpg" alt="1" class="col-md-2" />
<img src="images/carousel-2.jpg" alt="2" class="col-md-2" />
</div>
</div>
I want the height of columns to be the size of the images with acceptable padding and margin, and not 3 to 4 times bigger.
Picture of my website:
You can also add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="images/carousel-1.jpg" alt="1"/>
<img src="images/carousel-1.jpg" alt="1"/>
</div>
</div>
</div>
I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.
<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">
Thanks
https://jsfiddle.net/mztyoy7q/
Add a class to the image tags, and don't forget to add the bootstrap!
Just make sure you link the bootstrap, and you can use this free CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and add the class
class="img-responsive"
to your img tags.
JSFiddle
EDIT: If you want the images on the same line, just create a couple divs.
first, create a parent div,
<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
This div element will be red with 100% width, and automatically resizing height.
Then add divs between every image with the style float:left; like so:
<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
Here is the updated JSFiddle If this works, please let me know!
Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
https://jsfiddle.net/tvv89L1j/1/
About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).
I have written a code where 4 images are kept inside div side by side in cols.
Below is the code :
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" />
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
</div>
</div>
</div>
This looks like this in full size window :
enter image description here
Now when the window size is minimized, the images looks like this :
enter image description here
I want the image to look the way it looks in the full size even after minimizing without the image getting stretched.
I was able to get the view of above images without it getting stretched when i removed the style: width:100%; height:70%; but then in full sized window the images had blank spaces between each other.
Please help me to get this sorted.
Using
class="img-responsive"
will make your images responsive across devices. In specific, and as per Bootstrap's documentation, it will add
max-width: 100%;
height: auto;
display: block;
to your image elements.
You will need to lose your inline styles
style="width:100%; height:70%;"
as they override everything else (Protip: never use them).
Lastly, if you don't want the blank spaces between images you'll need to force remove the padding for each column. Example:
div.col-xs-3 {
padding: 0;
}
Here is a sample codepen.
#FredRocha hey Fred, I tried using only img-reponsive & losing the inline styles but then the images were looking like this in full screen window size:
Example image
Maybe adding img-responsive class to image will fix the problem.
I have a multiplayer html game (not using canvas) where you have a portrait of your character and a portrait of the character you are playing against. I want to put an image over your opponents character image if they haven't yet loaded their page. The image will say "Not Ready" and when they are ready I'll remove this image.
I'm using bootstrap for positioning of everything though and the answers I've seen before have talked about absolute positioning. How can I position this "Not Ready" image on top of the character portrait displayed with the below code?
My display of character portraits is:
<!--Portraits-->
<div id="divPortraitRow" class="row" style="margin-bottom: 10px;">
<div id="divPlayer" class="col-md-6 text-center">
<img src="#Model.Player.Icon" />
</div>
<div id="divOpponent" class="col-md-6 text-center">
<img src="#Model.Opponent.Icon" />
</div>
</div>
If im not mistaken the character portrait image is <img src="#Model.Player.Icon" />? Then you would want to include the new placeholder image along side your current image (and inside of <div id="divPlayer" class="col-md-6 text-center">) like so:
<div id="divPlayer" class="col-md-6 text-center">
<img src="#Model.Player.Icon" />
<img src="NEW IMAGE" /> <----new image here (order is not important)
</div>
The new image would be set to position: absolute and the parent: <div id="divPlayer" class="col-md-6 text-center"> needs to be set to position: relative otherwise the absolute image becomes relative to the body.
EXAMPLE FIDDLE