Images not resized based on Bootstrap column size
CssImageTwitter BootstrapTwitter Bootstrap-3Css Problem Overview
My goal is to display 4 images per row. Code below:
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
</div>
And I expect too see images resized based on column style from Bootstrap, but what I'm getting are overlapping full images .
Any clue what is going on?
Css Solutions
Solution 1 - Css
Try adding this to your stylesheet:
img {
width: 100%;
}
Update: As an alternative (as pointed out in this answer's comments by @JasonAller), you could 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. See the Bootstrap docs for more info.
update for bootstrap v4
The classname for bootstrap v4 is img-fluid
Bootstrap v4 docs
Solution 2 - Css
With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.
Solution 3 - Css
Sometimes on dynamic content when you have no control over what users put in, class="img-responsive" would not work. And 'width: 100%' for each image is tricky as well. So I am using:
img {max-width: 100%;}
Solution 4 - Css
Beware that bootstrap columns have padding as well; that may be unexpected.
The following:
div class="col-sm-6" style="padding:0"
worked for me.
Solution 5 - Css
If you want, you can use the width tag in the html element, for example:
<img width="60%" src="...">
I find it more useful, since you can play with the percentage until you have the desired size.
Solution 6 - Css
The solution to this is to use the <picture> and the <source> tags. Just make sure you have different sizes of your image prepared for various screens.