Similar to this question, I want to create a perfect square grid, but inside of each grid cell, I want to place an image with 100% height.
The problem is because I did the padding-bottom: 100%; height: 0
hack, height: 100%
no longer works on the image because the browser thinks the container has 0 height.
How can I set the height of the image to match that of the cell?
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
padding-bottom: 100%;
height: 0;
}
img {
position: relative;
left: 50%;
transform: translateX(-50%);
display: block;
/*height: 100%;*/
}
<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>
question from:https://stackoverflow.com/questions/65649642/square-css-grid-with-square-images