content overflowing from css grid

Question

Problem: I am having a problem with sizing images inside css grid column/rows. I essentially object-fit: contain the imagesinside their individual cells.

1. The image in "SPOT 4" is not filling the given space
2. If you uncomment the image in "SPOT 1", it will cover the entire grid and is not confined to its own css grid cell.

I have tried setting max-width , object-fit and others on the video level and .channel-container level with no success.

Background: The .parent-trap css class is just an example height/width. 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. 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*

 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

All you had to do is to add those lines (see the code below) on img in your css.

 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>