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

Question

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

---

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

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

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

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

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

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

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

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

的百分比

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

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

例如，在这里，我将图像父div 的最大高度参数切换为 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>

有好的一天！