[英]content overflowing from css grid
Problem: I am having a problem with sizing images inside css grid column/rows.问题:我在调整 css 网格列/行中的图像大小时遇到问题。 I essentially object-fit: contain
the imagesinside their individual cells.我本质上是object-fit: contain
在它们各自的单元格中。
I have tried setting max-width
, object-fit
and others on the video
level and .channel-container
level with no success.我尝试在video
级别和.channel-container
级别上设置max-width
、 object-fit
等,但没有成功。
Background: The .parent-trap
css class is just an example height/width.背景: .parent-trap
css class 只是一个示例高度/宽度。 This will vary, it may be the entire browser window, or it may be small so I cannot depend on any specific min/max dimensions.这会有所不同,它可能是整个浏览器 window,或者它可能很小,所以我不能依赖任何特定的最小/最大尺寸。 There are also other .display4
in the full version that sometimes shows a single video that fills the whole grid, side by side that only shows 2 at a time etc, so any specific dimensions also tend to break individual .display*
完整版中还有其他.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>
All you had to do is to add those lines (see the code below) on img
in your css.您所要做的就是在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.