css - 固定高度 div 内 max-height div 内的最大高度图像

Question

The skinny: 有没有办法让图像上的最大高度服从 不是它的祖先的固定高度直接 parent ？

---

我知道 max-height 需要一个固定的高度来计算，所以这不是重复的问题问为什么 max-高度并不能神奇地起作用。

我有一个元素 (.rightbox)，它具有 100% 的高度并且绝对位于自动高度容器内。该元素符合预期的高度。

然后该元素有一个最大高度为 100% 的子元素。这个元素也符合预期的高度，因为 .rightbox parent 有一个设置的高度(% + 绝对定位)

但是现在...我在那个 容器中有一个图像...它不符合最大高度。我认为拥有一个具有可计算高度的祖先将使该元素符合最大高度。

Max-width 有效，我相信它使用相同的祖先来计算宽度。

在 .rightbox 上设置 px 高度无效。

删除 .rightbox 和 img 之间的 div 会使 img 符合所需的最大高度。

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div,
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

Answer 1

这个答案有助于解决这个问题:

When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height

https://stackoverflow.com/a/14263416/2735479

然后，是，我们可以让图像上的最大高度服从祖先的固定高度但是直接父级必须有定义的高度百分比，而不仅仅是最大高度。

例如，我将图片父级div的max-height参数切换为100%的高度参数(在Mozilla Firefox 58版本上测试)

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div{
  height:100%;
  max-width:100%;
}
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

祝你有美好的一天!