在相同大小的单元格中显示不同高度和宽度的图像

Question

这是我试图实现的画廊类型的屏幕截图。重要的是图像保持不同的高度和宽度，但它们显示在相同大小的单元格中。

这是我的代码：

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

我的图像只是占据了它们单元格的整个宽度，我不知道如何让它们采用自己的尺寸但保持在单元格内。我曾尝试在单元格上设置固定高度，但这并没有改变任何东西。有什么建议吗？

Answer 1

我认为删除 width 的 li 可以解决问题。

看看我做的这个例子：https://codepen.io/szhabolcs/pen/dypeJMy?editors=1100

Answer 2

我认为使用“列表”来做这件事不是一个好主意。 我建议你把所有的 imgs 放在同一个 'div' 中，并放置一个像这样的 css 类：

.class {
display: flex;
justify-content: center;
}

这样，根据图像的大小和“div”的宽度，图像将保持在另一个旁边。您也可以在类中选择 div 的宽度。

Answer 3

如果你想让不同大小的图片包含在同一个大小的容器列表中，尝试给列表一个flex样式。

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