使用flexbox使图像与内容高度相同

Question

我正在尝试为每个用户在主要内容旁边添加一张图片。 内容的高度可能会有所变化，图片的纵横比也可能会有所不同。 图片具有固定的宽度，并且需要至少达到某个高度-但是，如果内容更高，则应该达到最大值。
这是一个例子，它无法完成以下两个任务：

1. 如果内容很短，则裁剪图像
2. 如果内容很长，则最大化：

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

我已经尝试了其他方法，它们可以完成一个目标，但在另一个方面失败了。

- KTibow

---

它失败了是指裁剪图像时两个方面都无法实现吗？ - Madan Bhandari

edited for clarity - KTibow

Answer 1

你可以尝试使用CSS网格布局：

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

- Temani Afif