昨天有人給我提供了一個答案，關于如何維護一個永遠不會溢位其視口的回應式盒子。
uj5u.com熱心網友回復：
這個代碼段與問題中給出的一樣，但有一些改動，影像src被設定，比例從原問題中的3/2改為16/9，這是評論中給出的影像的長寬比。
注意：影像可能會流到視口以下，因為自最初的問題以來已經添加了一些padding/bars - 計算需要考慮到這些尺寸，以確保影像不會變得太大。
。：root {
--varWidth: 80vw;
--varHeight: calc(80vh 3.5vh) 。
}
.aspectRatio3x2 {
--varAspectRatio: calc( 16 / 9) 。
--varCalcHeight: min(calc(var(-varWidth) / var(-varAspectRatio) )。var(--varHeight))。
height: var（--varCalcHeight）。
width: calc(var(--varCalcHeight) * var(--varAspectRatio) )。
background-color: gold;
}
.imgMain,
.imgOther {
object-fit: 包含。
width: 100%;
max-width: 100%;
border: 2px solid hsla(0, 0%, 100%, . 15）。)
}
.imgMain {
border-bottom: none;
}
/* 其他 CSS */
.contentContainer {
width: 100%;
height: auto;
padding: min（4vh, 3.5vw）。
background: hsl(0 0% 10%) 。
background: 紅色。
}
.pageDefault {
width: 100%;
background-color: 黑色。
}
.pageDefault article {
position: relative;
margin: 0 auto;
background: lime;
}<div class="contentContainer"> /span>
< main id="idMainContent" class="pageDefault">
<article class="aspectRatio3x2"/span>>
<figure class="">/span>
<picture class="">/span>
<img class="imgMain"/span> src="https://i. stack.imgur.com/DT0i7.jpg" />
</picture>
<figcaption></figcaption>
</figure>/span>-->
</article>-->
</main>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/326125.html
標籤：