css - 限制图像的最大高度，这取决于其 sibling 的高度

Question

我如何限制图像的最大高度，使其与其同级图像的高度相同，而不管屏幕尺寸如何。

可接受的结果=> Same height - √

这是 Not Acceptable 结果，因为图像列的高度超过了其同级列的 => (DIV - .main-content)。 Not valid one - X

附言背景图像属性不适合这种情况。

.container {
  display: flex;
  height: 100%;
}

.container>div {
  flex: 1;
}

.main-content {
  background: pink;
  padding: 20px;
}

.sidebar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="main-content">
    Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
    ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
  </div>
  <div class="sidebar">
    <img src="https://placeimg.com/640/490/nature">
  </div>
</div>

Answer 1

好吧，看来我可能找到了解决办法。一种方法是将图像定位为绝对图像并“拉伸(stretch)它”，同时 object-fit 仍保持其覆盖属性。如果有人有更好的解决方案，请随时分享。

.container {
  display: flex;
  height: 100%;
=
}

.container > div {
  flex: 1;
}

.main-content {
  background: pink;
  padding: 20px;
}

.sidebar img {
  object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  height: 100%;
  width: 100%;
}

.sidebar {
  position: relative;
}

<div class="container">
  <div class="main-content">
    Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.

Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
  </div>
  <div class="sidebar">
    <div><img src="https://placeimg.com/640/1000/nature"></div>
  </div>
</div>