在具有 CSS 的 flex 列表项中将图像放入免费 space

Question

我目前正在尝试使用 flexbox 调整各种大小的图像以适应列表项中给定的 space。我已经尝试让它工作几个小时了。

列表元素的右侧包含一些文本（~2/3 屏幕），左侧为图像保留（~1/3 屏幕）。我希望列表元素具有适合给定文本的高度，并且我想相应地缩放图像。如果图像的宽度太小，则应按比例放大以适合可用宽度。这同样适用于图像的高度。如果它太小，图像应该按比例放大。同时，如果宽度太大，应该按比例缩小，但前提是图像的高度不小于可用高度。

应隐藏所有溢出。

我希望我想要实现的行为是可以理解的。

.list {
  list-style: none;
  padding: 0;
  border-top: 5px solid black;
}

.list li {
  border-bottom: 5px solid black;
  padding: 5px 0;
  display: flex;
  align-items: stretch;
}

.list-img {
  width: 33%;
  background-color: green;
  padding: 0;
  display: flex;
  align-items: center;
}

.list-img img {
  /*
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  */
  overflow: hidden;
}

.list-txt {
  width: 66%;
  display: flex;
  align-items: center;
  padding-left: 25px;
}

<ul class="list">
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/100x200" alt="img1">
    </div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/200x200" alt="img1">
    </div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/200x100" alt="img1">
    </div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
</ul>

这就是我到目前为止的想法。如您所见，图像缩放根本没有按照我的预期工作。

如有任何帮助，我们将不胜感激。

编辑：

这是想要的结果。图片应填满所有可用的 space。像 nr 1 这样高而窄的图像应该按比例放大并在顶部和底部切割。而像nr 3这样宽但不高的图片应该按比例放大并在右侧切割。

Answer 1

见鬼！我设法通过使用绝对位置和 object-fit: cover.

.list {
  list-style: none;
  padding: 0;
  border-top: 5px solid black;
}

.list li {
  border-bottom: 5px solid black;
  margin: 5px 0;
  display: flex;
  align-items: stretch;
  position: relative;
}

.list-img {
  width: 33%;
  height: calc(100% - 5px);
  background-color: green;
  position: absolute;
}

.list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.list-txt {
  width: 66%;
  display: flex;
  align-items: center;
}

.img-placeholder {
  width: 33%;
  margin: 0 20px;
}

<ul class="list">
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/100x200" alt="img1">
    </div>
    <div class="img-placeholder"></div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/200x200" alt="img1">
    </div>
    <div class="img-placeholder"></div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
  <li>
    <div class="list-img">
      <img src="https://via.placeholder.com/200x100" alt="img1">
    </div>
    <div class="img-placeholder"></div>
    <div class="list-txt">
      <div>
        <h1>
          Headline 1
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
        </p>
      </div>
    </div>
  </li>
</ul>

在具有 CSS 的 flex 列表项中将图像放入免费 space

Fitting images to free space in a flex list item with CSS

html

css

image

flexbox