根据子img高度改变父div高度，不超过父div最大宽度

Question

我还没有找到任何好的 CSS 代码来解决我的问题，并且适用于所有主要浏览器。 话虽如此，每当我在父 div 中使用max-height: 90%并在子 img 中设置max-height: 100%时，safari 都会自动执行此操作。 但是，Mozilla 没有。

是否有任何跨浏览器解决方案来确保 img 不会扩展到超过父 div 的高度。 但是父 div 可以调整到孩子的高度，并且被限制在它自己的max-height ？

我也接受 jQuery，但在答案中更喜欢 CSS。

当涉及到宽度时，父 div 中的width: 60%始终为width: 60% ，子 img 中的max-width: 100% 。

代码

.fullScaleContent{
    position: fixed;
    width: 60%;
    max-height: 90%;
    height: auto;
    margin: 2% auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    -webkit-transform: translate(-50%, -55%); 
    -ms-transform: translate (-50%, -55%);
}
.fullScaleContent img{
    width:auto;
    height:auto;
    max-width: 100%;
    max-height: 100%;
}

图片示例：第一张图片是 safari 中的高度限制，第二张图片是 Firefox。 我需要两者都与 safari 相似。 PS：黑色边框是div的实际边框

有限的宽度 - 两者都可以正常工作 - 根据 img 调整高度，最大宽度为 60%

Answer 1

使用的object-fit: contain

如果您使用position ，请在您的图像上使用它，以便它在流程中。

在整页中查看代码段并调整其大小。

片段

 *, *:before, *:after { box-sizing: border-box; } html, body { width: 100%; height: 100%; position: relative; } .fullScaleContent { position: fixed; width: 60%; max-height: 90%; height: auto; margin: 2% auto; left: 50%; top: 50%; transform: translate(-50%, -55%); -webkit-transform: translate(-50%, -55%); -ms-transform: translate (-50%, -55%); } .fullScaleContent img { position: relative; object-fit: contain; min-width: 128px; max-width: 100%; height: auto; }

 <figure class="fullScaleContent"> <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"> </figure>