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

【问题标题】：Limit image's max-height which depends on its sibling's height限制图像的最大高度，这取决于其兄弟的高度
【发布时间】：2018-11-29 13:43:26
【问题描述】：

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

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

一个不可接受的结果，因为图像列的高度超过了其兄弟的 => (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>

【问题讨论】：

标签： css html flexbox object-fit

【解决方案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>

【讨论】：