Img Extends Beyond Parent Div

Question

I am developing a custom theme for my blog using bootstrap 3 and I got most of it to work but on my posts I have a problem where my images extend outside the main content area over the sidebar on the right!

I am using <div class="span8"> for main content and a <div class="span4"> for the sidebar. in my stylesheet I have added...

.span8 img {
    max-width: 100% !important;
    height: auto;
}

but that does not seem to work! I have also looked on the getbootstrap.com website under the images section but there is nothing there as well!

Let me know if you wish to view the site and I will be more than happy to provide a link! Many thanks!

Answer 1

Change to :-

.span8 img {
    max-width: 100% !important;
    height: auto;
    width: auto;
}

This is a browser issue in some it will work but others will require the width: auto

Answer 2

Bootstrap provides an img-responsive class which you can apply to your images.

<img src="#" class="img-responsive" />

This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Ref: http://getbootstrap.com/css/#images