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?
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>