Reputation: 453
Here is a screen shot of the type of gallery I am trying to achieve. It's important that the images maintain their different heights and widths, but that they are displays in same size cells.
And here is my code:
html:
<ul>
<li><img/></li>
<li><img/></li>
<li><img/></li>
<li><img/></li>
</ul>
css:
ul {display: flex; flex-wrap: wrap;}
li {width: 25%;}
img { object-fit: contain; width: auto; height: auto;}
My images are just taking the full width of their cells, and I'm not sure how to have them take their own dimensions but stay within the cell. I have tried setting a fixed height on the cell but that didn't change anything. Any suggestions?
Upvotes: 0
Views: 282
Reputation: 54
I don't think it's a good idea to do that using 'list'. I suggest you to put all the imgs inside the same 'div' and put a css class that goes like this:
.class {
display: flex;
justify-content: center;
}
That way the images will stay on next to the other respecting the size of the image AND the width of the 'div'. You can choose inside the class the width of the div as well.
Upvotes: 1
Reputation: 161
If you want to let different size of images contain in a same size container list, try to give list a flex
style.
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
display: flex;
justify-content: center;
width: 25%;
height: 300px;
list-style: none;
}
img {
object-fit: contain;
overflow: hidden;
}
Upvotes: 0
Reputation: 23
I think removing the width
of the li
does the trick.
Check out this example I made: https://codepen.io/szhabolcs/pen/dypeJMy?editors=1100
Upvotes: 1