Post images adjusting to primary content area width?

I’m working on several themes with a fixed layout, where I’d like to have images inserted in posts stretching as wide as the primary content area. However, when inserting a full size image (eg. 1024x768) to a post it overflows the primary content area.

I could resolve this by adding the img-responsive class to each img manually, but this would be a somewhat ulgy solution, especially if this would be for an existing blog so eg. something (custom function?) which would insert/modify the classes for the <img> -tag would be handy.

Or have I missed out on something?

Method in the thread below should help, please make sure to search before posting. For Bootstrap styling issues you are probably best referring to the Bootstrap documentation/forum.

http://discourse.roots.io/t/wordpress-fixed-width-on-figures-and-padding-from-bootstrap-thumbnail/416/4

Thanks chriscarr for pointing me in the right direction. However, this resolves the issue just partly. There’s a style="width: " attribute to the figure-tag which will cause images to be displayed in original size.
Here’s what I did to resolve it:

// Prevent images to overflow the canvas by adding img-responsive class
figure.thumbnail > a > * {
.img-responsive; 
}
// Prevent images to overflow by overriding style="width: " with max-width: 100%
figure.wp-caption{
	max-width: 100%;
}
1 Like

I suspect that there is another rule at play here since the .thumbnail class already has max-width: 100% applied. Actually, bootstrap also accounts for responsive images within a .thumbnail wrapper:

// from bootstrap/thumbnails.less
.thumbnail {
  .img-thumbnail();
  display: block; // Override the inline-block from `.img-thumbnail`

  > img {
    .img-responsive();
  }
}

Since WP defaults to adding images wrapped in an anchor we have to add a simple rule as you did

.thumbnail > a > img {
  .img-responsive();
}