从 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>