I’m trying to have a picture for each user alongside the main content. The content may vary in height, and the pictures may also vary in aspect ratio. The picture has a fixed width, and needs to be at least a certain height – however, if the content is higher, it should max out.
Here’s an example, it fails at both tasks of
- cropping the image if the content is short
- maxing out if the content is long:
.container {
display: flex;
padding: 1rem;
background: #ddd;
}
img {
width: 4rem;
height: auto;
object-fit: cover;
}<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, voluptates?
</div>
<img src="https://placedog.net/500/700" />
</div>
<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos eius quam iste, ad quisquam quidem dolore blanditiis minus magnam. Odit, quia. Placeat non voluptatum quis ab suscipit sequi earum, itaque asperiores ullam quasi ipsum iste perferendis nisi dolorem dicta expedita repudiandae deserunt numquam dolores! Modi aliquid enim dicta est, optio fugit sequi accusantium laboriosam ducimus dolorum molestiae unde dignissimos ea laudantium cum nam, a, asperiores iste perspiciatis ab mollitia. Nisi vitae, fugiat ex, ratione, debitis autem inventore possimus vel quam, expedita error amet quas? Unde sunt, quas suscipit accusantium, asperiores ex voluptatem! Libero nihil quidem sit dolorem doloribus iure natus necessitatibus voluptas voluptates ab cum, eaque cupiditate ipsam, ducimus, vero, ipsum laboriosam eveniet. Ipsa ullam iure molestias eveniet doloremque eaque, distinctio aliquam consectetur minima odit iste nesciunt reiciendis possimus. Dolores consequuntur temporibus aspernatur laborum explicabo voluptas ipsam sit, quas veritatis doloribus dolorem veniam labore facilis distinctio quo a. Numquam itaque, voluptates expedita nisi eligendi necessitatibus cumque in, eaque adipisci soluta cum, nam veritatis odio! Deleniti saepe veritatis architecto modi id dignissimos obcaecati quibusdam sapiente, recusandae soluta, possimus, laboriosam harum eaque esse quae cumque unde. Officiis, ratione. Veritatis sit doloremque praesentium eius, excepturi officiis, illum, magni quisquam culpa consectetur exercitationem.
</div>
<img src="https://placedog.net/500/700" />
</div>I tried other things already, they accomplish one but fail at the other.
>Solution :
You can try CSS grid:
.container {
display: grid;
grid-template-columns: auto 4rem;
gap: 1rem;
padding: 1rem;
background: #ddd;
/* justify-content: start uncomment this if you want the first column as wide as its content */
}
img {
width: 100%;
height: 0; /* the text will define the height but the image not */
min-height: min(200px, 100%); /* 100% but no more than 200px */
object-fit: cover;
}<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, voluptates?
</div>
<img src="https://placedog.net/500/700" />
</div>
<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos eius quam iste, ad quisquam quidem dolore blanditiis minus magnam. Odit, quia. Placeat non voluptatum quis ab suscipit sequi earum, itaque asperiores ullam quasi ipsum iste perferendis
nisi dolorem dicta expedita repudiandae deserunt numquam dolores! Modi aliquid enim dicta est, optio fugit sequi accusantium laboriosam ducimus dolorum molestiae unde dignissimos ea laudantium cum nam, a, asperiores iste perspiciatis ab mollitia.
Nisi vitae, fugiat ex, ratione, debitis autem inventore possimus vel quam, expedita error amet quas? Unde sunt, quas suscipit accusantium, asperiores ex voluptatem! Libero nihil quidem sit dolorem doloribus iure natus necessitatibus voluptas voluptates
ab cum, eaque cupiditate ipsam, ducimus, vero, ipsum laboriosam eveniet. Ipsa ullam iure molestias eveniet doloremque eaque, distinctio aliquam consectetur minima odit iste nesciunt reiciendis possimus. Dolores consequuntur temporibus aspernatur laborum
explicabo voluptas ipsam sit, quas veritatis doloribus dolorem veniam labore facilis distinctio quo a. Numquam itaque, voluptates expedita nisi eligendi necessitatibus cumque in, eaque adipisci soluta cum, nam veritatis odio! Deleniti saepe veritatis
architecto modi id dignissimos obcaecati quibusdam sapiente, recusandae soluta, possimus, laboriosam harum eaque esse quae cumque unde. Officiis, ratione. Veritatis sit doloremque praesentium eius, excepturi officiis, illum, magni quisquam culpa consectetur
exercitationem.
</div>
<img src="https://placedog.net/500/700" />
</div>