根據子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>