I'm currently working with a grid layout. I utilized grid-template-columns and grid-template-rows to outline its structure. My aim is for the first cell to feature an image. To horizontally center it, my plan was to enclose it within a div that can act as a flex or grid container.
I'm encountering difficulties when trying to scale the image. When skipping the div and directly placing the image inside the grid, I can utilize height: 100%; to scale it down so it fits the cell height.
However, adding an extra div container changes things. The use of height: 100% now appears to reference the height of the entire grid layout instead of just the div. According to Google, I should employ max-height and max-width, but I'm struggling to make it function correctly. Below, you'll find a simple test project (both HTML and CSS) illustrating this issue. You can observe how large the sections of the grid should be by using width: 25px;.
I would greatly appreciate any assistance in solving this matter. Remember, this is just a basic test project, so please excuse the naming conventions of my classes and IDs.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.class {
background-color: blue;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 3fr 3fr;
gap: 10px;
background-color: green;
}
#image-container>img {
max-height: 100%;
}<div class="container">
<div class="class" id="image-container">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
</div>
<div class="class" id="2">Good</div>
<div class="class" id="3">Day</div>
</div>