CSS grid can do better job here:
#_parent {
display: flex;
height: 100vh;
width: 50vw;
place-items: center;
justify-content: center;
margin: auto;
}
#_grid {
display: flex;
min-height: 0;
height: 80%;
}
#_row {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr 1fr;
}
._img {
min-height: 100%;
height: 0;
width: 100%;
object-fit: contain;
}
body {
margin: 0;
}
<div id="root">
<div id="_parent">
<div id="_grid">
<div id="_row">
<img id="" src="//placeimg.com/600/400?text=1" class="_img">
<img id="" src="//placeimg.com/600/400?text=2" class="_img">
<img id="" src="//placeimg.com/600/400?text=3" class="_img">
<img id="" src="//placeimg.com/600/400?text=4" class="_img">
<img id="" src="//placeimg.com/600/400?text=5" class="_img">
<img id="" src="//placeimg.com/600/400?text=6" class="_img">
<img id="" src="//placeimg.com/600/400?text=7" class="_img">
<img id="" src="//placeimg.com/600/400?text=8" class="_img">
<img id="" src="//placeimg.com/600/400?text=9" class="_img">
<img id="" src="//placeimg.com/600/400?text=10" class="_img">
<img id="" src="//placeimg.com/600/400?text=11" class="_img">
<img id="" src="//placeimg.com/600/400?text=12" class="_img">
<img id="" src="//placeimg.com/600/400?text=13" class="_img">
<img id="" src="//placeimg.com/600/400?text=14" class="_img">
<img id="" src="//placeimg.com/600/400?text=15" class="_img">
</div>
</div>
</div>
</div>
You can fix it by adding the attribute overflow: auto; to the parent element _parent.
I’m trying to make a dynamic (number of columns/rows might change) grid of images that always gets resized to a percentage of the viewport’s size.
The width limit works fine, but the grid goes over the height limit. How can I fix this?
I’d also like the images to have no spaces or gaps between them (both on the y and x axis) no matter their size.
https://jsfiddle.net/od3tyepr/
* {
margin: 0;
border: 0;
padding-right: 0;
padding-left: 0;
padding: 0;
}
#_parent {
display: flex;
height: 100vh;
width: 50vw;
align-content: center;
align-items: center;
margin: auto;
}
#_grid {
position: relative;
display: flex;
align-items: flex-start;
height: 80%;
width: 100%;
}
#_row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
._img {
max-width: 100%;
max-height: 100%;
width: calc(100% / 3);
object-fit: contain;
}
<div id="root">
<div id="_parent">
<div id="_grid">
<div id="_row">
<img id="" src="//placeimg.com/600/400?text=1" class="_img">
<img id="" src="//placeimg.com/600/400?text=2" class="_img">
<img id="" src="//placeimg.com/600/400?text=3" class="_img">
<img id="" src="//placeimg.com/600/400?text=4" class="_img">
<img id="" src="//placeimg.com/600/400?text=5" class="_img">
<img id="" src="//placeimg.com/600/400?text=6" class="_img">
<img id="" src="//placeimg.com/600/400?text=7" class="_img">
<img id="" src="//placeimg.com/600/400?text=8" class="_img">
<img id="" src="//placeimg.com/600/400?text=9" class="_img">
<img id="" src="//placeimg.com/600/400?text=10" class="_img">
<img id="" src="//placeimg.com/600/400?text=11" class="_img">
<img id="" src="//placeimg.com/600/400?text=12" class="_img">
<img id="" src="//placeimg.com/600/400?text=13" class="_img">
<img id="" src="//placeimg.com/600/400?text=14" class="_img">
<img id="" src="//placeimg.com/600/400?text=15" class="_img">
</div>
</div>
</div>
</div>
As you can see, the image doesn’t get resized to fit the height and instead there is a lot of scrolling.
That looks like it could almost work, but when the images get resized down they get separated (
You basically just removed the height from the css which is the entire point.
Then instead of the images getting resized to fit the container, the container becomes scrollable. Not what I’m looking for, unfortunately.
