我創建了一個簡單的 div，將縱橫比屬性設定為另一個 div 的子級。內部 div 必須填充整個可能的空間（但仍然尊重傳遞的縱橫比）。
它在基于鉻的瀏覽器上按預期作業，但在 Firefox 上似乎忽略了寬高比，當 width: 100% 設定并且內部 div 最終被拉伸時。
.box {
width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
border: 2px dashed black;
background-color: lightblue;
}
.container {
height: 50vh;
}<div class="container">
<div class="box">
Sample content
</div>
</div>uj5u.com熱心網友回復：
將aspect-ratio是一個弱宣告所以你在Firefox中可以得到，因為元素被尊重被認為是正確的width和max-height之前aspect-ratio。我什至會說 Chrome 的行為是錯誤的。
值得注意的是，aspect-ratio僅設定首選縱橫比 ref才能為具有固有縱橫比的影像元素提供類似的行為。它從來不是為了強制元素的比例。
在您的示例中使用影像，您將獲得與 Firefox 相同的結果
.box {
width: 100%;
max-height: 100%;
/*aspect-ratio: 1 / 1;*/
}
.container {
height: 50vh;
}<div class="container">
<img src="https://picsum.photos/id/237/300/300" class="box">
</div>以上將為您提供一個拉伸影像，以確認 Firefox 的正確行為
uj5u.com熱心網友回復：
使用 max-width: 100% 代替，在 chrome 和 firefox 中對我來說效果很好：
.box {
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
border: 2px dashed black;
background-color: lightblue;
}
.container {
height: 50vh;
}<div class="container">
<div class="box">
Sample content
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370169.html