CODEWITHSUNDEEP
wordpressimagecsstwitter-bootstrap
Phillip Dews
Phillip Dews

Reputation: 338

Img Extends Beyond Parent Div

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!

Upvotes: 3

Views: 9159

Answers (2)

henrywright
henrywright

Reputation: 10240

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

Upvotes: 2

Barry Dowd
Barry Dowd

Reputation: 168

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

Upvotes: 4

Related Questions