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

I am currently trying to resize variously sized images to fit into a given space in a list item using flexbox. I have been trying to get this to work for several hours now.

The right side of the list element contains some text (~2/3 of the screen) and the left side is reserved for the image (~ 1/3 of the screen). I want the list element to have a height to fit the given text and I want to scale the image accordingly. If the image's width is too small it should be scaled up to fit the available width. The same should apply to the image's height. If it is too small the image should be scaled up. At the same time, if the width is too big it should be scaled down, but only if the height of the image is not smaller than the available height.

All overflow should be hidden.

I hope the behavior I want to achieve is understandable.

.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 >
  <li>
    <div >
      <img src="https://via.placeholder.com/100x200" alt="img1">
    </div>
    <div >
      <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 >
      <img src="https://via.placeholder.com/200x200" alt="img1">
    </div>
    <div >
      <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 >
      <img src="https://via.placeholder.com/200x100" alt="img1">
    </div>
    <div >
      <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>

This is what I've come up with so far. As you can see, the image scaling is not working as I intended it at all.

Any help would be greatly appreciated.

Edit:

This is the desired result. The images should fill all available space. Images like nr 1 that are high but narrow should be scaled up and cut at the top and bottom. And Images like nr 3 that are wide but not high should be scaled up and cut at the right side.

CodePudding user response：

Hell yeah! I managed to do it exactly as I wanted it by using absolute positions and 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 >
  <li>
    <div >
      <img src="https://via.placeholder.com/100x200" alt="img1">
    </div>
    <div ></div>
    <div >
      <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 >
      <img src="https://via.placeholder.com/200x200" alt="img1">
    </div>
    <div ></div>
    <div >
      <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 >
      <img src="https://via.placeholder.com/200x100" alt="img1">
    </div>
    <div ></div>
    <div >
      <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>