Images not resized based on Bootstrap column size
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
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%;}
With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.