固定高度 div 内的最大高度 div 内的最大高度图像

Question

瘦子：有没有办法让图像上的最大高度服从不是其祖先的固定高度直接父母？

---

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

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

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

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

最大宽度有效，我相信它使用相同的祖先来计算宽度。

在.rightbox 上设置像素高度无效。

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

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

当您为孩子的最大高度指定百分比时，它是 父母实际高度的百分比，而不是父母的最大高度

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

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

这里比如我把图片的父div的max-height参数切换为100%的height参数，（在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>

祝你有美好的一天！