Display posts flex while keeping original featured image aspect ratio

Question

I am displaying recent posts in a row. The featured images have different aspect ratios (some are landscape, some portrait), and I’d like for the images to keep their aspect ratios and for the whole article section to grow (width-wise) or shrink as needed based on the image.

My current results show the landscape as only slightly wider than the portraits, and all images, whether landscape or portrait are cropped. (Due to the max-height of 350px, but if I make the max-height taller, the landscape images do not grow to fill the height.)

So in a nutshell I don’t want any of the images cropped, just all the same height and for the width to be automatic based on the original aspect ratio.

The HTML is essentially:

<section class="recent-posts">
   <article>
      <a[post link]>
         Thumbnail
         Post Title
      </a>
      Excerpt
   </article>
</section>

The CSS I currently have is:

.recent-posts {
    display: flex;
    justify-content: space-between; 
}
.recent-posts img {
    max-height: 330px;  
    height: max-content;
    object-fit: cover;  
}
.recent-posts article {
    margin-bottom: 10px;
}

Example can be seen here.

I’d much rather not have to use JS, but if I have to that’s fine. Can someone tell me what I’m doing wrong, or what a better way would be?

0
Christina 5 months 2021-06-24T09:57:57-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse