Fluid image that is not width:100%

Question

I have a scenario in which images of varying dimensions appear in a column that's 50% page width.

On large screens where the column width exceeds an image's native width, the image should render to its native width while still being fluid.

Image dimensions vary (i.e. landscape vs. portrait orientation), so no single width or height can be applied to the img element. I can constrain parent element to a max-width that matches the largest image width that will display, but images of lesser widths expand too wide once made fluid.

The basic structure is:

<div class="column">
  <figure>
    <img>
  </figure>
</div>

With this CSS:

.column {width:50%;}
.column figure {
    display:block;
    margin:0 auto;
    width:100%;
    max-width:800px; /* the largest image width */
    text-align: center; /* to center images of lesser width */
}
.column img {?}

I can add a data attribute to the img element indicating orientation, using this to apply max-width, but this requires more work for site editors, which I need to avoid. Hence, I seek a CSS-only solution...but I'm stuck.

Any ideas?

Related to this I guess : http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image — Baldráni, May 25 '16 at 19:43

score 0 · Accepted Answer · answered May 25 '16 at 20:02

How about using max-width again, allowing the image to fully expand to the width of its container, but not larger? Something like:

.column img {
    max-width: 100%;
}

This will allow the image to be responsive as needed - scaling with the size of its parent, but never exceeding its native width. Here's a demo with some random images - note how the natively smaller and larger image stop at different widths when given enough space:

.column {
  width: 50%;
}
.column figure {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  /* the largest image width */
  text-align: center;
  /* to center images of lesser width */
}
.column img {
  max-width: 100%;
}

<div class="column">
  <figure>
    <img src="http://www.ltsgrill.com/wp-content/uploads/2014/09/red_lobster.jpg" />
  </figure>
</div>

<div class="column">
  <figure>
    <img src="http://www.mjseafood.com/_assets/400x300/Crayfish.jpeg" />
  </figure>
</div>

Ah well smack me with a lobster. I swear I thought I tried that, but I guess not. Thanks! — Wesley Picotte, May 26 '16 at 19:42
@WesleyPicotte Glad I could help out! Sometimes it just takes a second pair of eyes to spot things like this. As a tip for using Stack Overflow, when you get an answer that satisfactorily resolves your problem, you can accept it by clicking the checkmark next to it - this signals to other people that the question is answered. (And you get some internet points for it, if those are your thing, haha.) — Serlite, May 26 '16 at 20:29

Fluid image that is not width:100%

1 Answers1