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

Question

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

可接受的结果 => 相同高度 - √</a>

由于图像列高度超过其兄弟的 => (DIV - .main-content)，因此结果不可接受。 无效的一个 - X

PS Background-image 属性在这种情况下不适用。

.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

好吧，看来我可能已经找到了解决方案。一种方法是将图像定位为绝对图像并“拉伸”它，而对象匹配仍然保持它的覆盖属性。如果有人有更好的解决方案，请随时分享。

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