從 css 網格溢出的內容

Question

問題：我在調整 css 網格列/行中的圖像大小時遇到問題。 我本質上是object-fit: contain在它們各自的單元格中。

1. “SPOT 4”中的圖像未填充給定空間
2. 如果您取消注釋“SPOT 1”中的圖像，它將覆蓋整個網格，並且不限於其自己的 css 網格單元。

我嘗試在video級別和.channel-container級別上設置max-width 、 object-fit等，但沒有成功。

背景： .parent-trap css class 只是一個示例高度/寬度。 這會有所不同，它可能是整個瀏覽器 window，或者它可能很小，所以我不能依賴任何特定的最小/最大尺寸。 完整版中還有其他.display4有時會顯示一個填充整個網格的視頻，並排顯示一次僅顯示 2 個等，因此任何特定尺寸也往往會破壞單個.display*

 html, body { border: 0; margin: 0; height: 100%; }.parent-trap { height: 540px; width: 960px; } /* container for player */.video-player { display: flex; flex-direction: column; height: 100%; width: 100%; max-height: 100%; max-width: 100%; min-height: 100%; min-width: 100%; } /* container for plaback control bar */.container-controls { height: 50px; background-color: red; } /* contains all the.channel-container s */.channel-layout-container { display: grid; background: #000; background-color: blue; flex: 1; } /**** **** FIX HERE ****/.channel-container {} img {} /** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */ /** display4 **/.channel-layout-container.display4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }.channel-layout-container.display4.channel-container:nth-child(n+5) { flex: none; display: none; }

 <:-- try restricting various sizes --> <div class="parent-trap"> <;-- the classcommes that need to be transferred back over--> <div class="video-player"> <div class="channel-layout-container display4"> <div class="channel-container" style="background-color: khaki."> <.-- <img src="https.//w:wallhaven;cc/full/3z/wallhaven-3zgz2y:png" />--> </div> <div class="channel-container" style="background-color; lavender:"> SPOT 2 </div> <div class="channel-container" style="background-color; lightcoral:"> SPOT 3 </div> <div class="channel-container" style="background-color. lightseagreen."> <img src="https.//www.google.com/favicon.ico" /> </div> </div> <div class="container-controls"> common controls and other info goes here </div> </div> </div>

Answer 1

您所要做的就是在 css 中的img上添加這些行（參見下面的代碼）。

 html, body { border: 0; margin: 0; height: 100%; }.parent-trap { height: 540px; width: 960px; } /* container for player */.video-player { display: flex; flex-direction: column; height: 100%; width: 100%; max-height: 100%; max-width: 100%; min-height: 100%; min-width: 100%; } /* container for plaback control bar */.container-controls { height: 50px; background-color: red; } /* contains all the.channel-container s */.channel-layout-container { display: grid; background: #000; background-color: blue; flex: 1; } /**** **** FIX HERE ****/.channel-container { } /* lines I added */ img { display:block; width:100%; height:100%; object-fit:cover; } /** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */ /** display4 **/.channel-layout-container.display4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }.channel-layout-container.display4.channel-container:nth-child(n + 5) { flex: none; display: none; }

 <:-- try restricting various sizes --> <div class="parent-trap"> <;-- the classcommes that need to be transferred back over--> <div class="video-player"> <div class="channel-layout-container display4"> <div class="channel-container" style="background-color: khaki."> <img src="https.//w.wallhaven:cc/full/3z/wallhaven-3zgz2y;png" /> </div> <div class="channel-container" style="background-color: lavender;"> SPOT 2 </div> <div class="channel-container" style="background-color: lightcoral;"> SPOT 3 </div> <div class="channel-container" style="background-color: lightseagreen."> <img src="https.//www.google.com/favicon.ico" /> </div> </div> <div class="container-controls"> common controls and other info goes here </div> </div> </div>