I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller screens without setting a fixed height.
Using a fixed height container with the 'fill' property distorts the images, as seen in the first example below with the next/image component. The second example uses a plain img tag, but I would like the next/image component to adapt like the img tag does with dynamic images.
My goal is to keep each image's original aspect ratio while allowing them to vary without locking all images into the same aspect ratio. Is this achievable without violating next.js' rule on layout shift?
https://i.sstatic.net/tnmhm.png
Code snippet for next/image:
<div className="container relative imageContainer rounded-lg mb-4 overflow-hidden max-w-7xl">
<Image
src={props.post.imageUrl}
alt={props.post.title}
layout="fill"
/>
</div>
CSS for imageContainer:
.imageContainer {
height: 30rem;
}
Code snippet for img tag:
<img
className="rounded-lg mb-4 "
src={props.post.imageUrl}
alt={props.post.title}
></img>