CODEWITHSUNDEEP
htmlcssimageflexbox
KatherineMichelle
KatherineMichelle

Reputation: 453

Display images with different heights and widths, in same size cells

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. enter image description here

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

Answers (3)

Rafael Ferreira
Rafael Ferreira

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

juana pu
juana pu

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;
}

codepen

Upvotes: 0

Nagy Szabolcs
Nagy Szabolcs

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

Related Questions