我目前正在做一個專案，在該專案中我必須以網格布局顯示影像。對我來說很自然的事情是使用 CSS 網格。我有一個有效的解決方案，它只在某些縱橫比（縱向縱橫比）下看起來不錯。一旦縱橫比在橫向上（尤其是 16:9），整個網格就不再適合螢屏。影像似乎是問題所在，因為它們沒有垂直“縮放”。
看起來很適合“縱向”縱橫比：
看起來不適合“寬”縱橫比：
.container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.client {
display: grid;
border: 3px solid black;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
}
.client-title {
grid-column: 1 / -1;
grid-row: 1;
}
.client-description {
grid-column: 1 / -1;
grid-row: 6;
}
.exercise-image {
object-fit: cover;
width: 100%;
height: 100%;
}<div class="container">
<div class="client">
<div class="client-title">
Title Text 1
</div>
<!-- Repeated 8 times -->
<div class="exercise">
<img class=" exercise-image " src="https://via.placeholder.com/300.jpg">
</div>
<div class="client-description ">
Description Text 1
</div>
</div>
<div class="client ">
<div class="client-title ">
Title Text 2
</div>
<!-- Repeated 8 times -->
<div class="exercise">
<img class="exercise-image" src="https://via.placeholder.com/300.jpg">
</div>
<div class="client-description">
Description Text 2
</div>
</div>
</div>你有什么想法，我在這里想念什么？
謝謝！
uj5u.com熱心網友回復：
將
.client網格的高度直接設定為完整視口高度并移除height: 100vh其網格容器元素.container。這是有效的，因為現在“.client”網格的網格行的高度是直接相對于視口的當前高度計算出來的。并且包含元素相應地適應該孩子的高度。將包含每行影像
min-height的.exercise網格項的設定為 0 以覆寫默認值（min-width/min-height: auto 是 CSS 網格默認設定），從而使影像可縮小到低于其自身大小。
CSS：
.container {
position: fixed;
top: 0;
left: 0;
// height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.client {
display: grid;
border: 3px solid black;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
height: 100vh; // height: 100%;
}
.client-title {
grid-column: 1 / -1;
grid-row: 1;
}
.client-description {
grid-column: 1 / -1;
grid-row: 6;
}
.exercise {
min-height: 0;
}
.exercise-image {
object-fit: cover;
width: 100%;
height: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358843.html