不使用object-fit: cover的CSS图像网格

Question

基本上试图获得Adobe Stock和Shutterstock拥有的东西，即一个水平的砖石网格，而不会改变图像的纵横比与对象匹配或任何其他拉伸。

每个解决方案都使用object-fit: cover，这意味着图像会被裁剪。

我的图片来自一个API，它们都有不同的大小。

我最接近的是：

HTML：

<div id='container'>
    <div class='image'>
        <img src='' alt=''>
    </div>

    <div class='image'>
        <img src='' alt=''>
    </div>

    <div class='image'>
        <img src='' alt=''>
    </div>
</div

CSS：

#container {
    display: flex;
    flex-wrap: wrap;
}

.image {
    flex-grow: 1;
    margin: 2px;
    max-height: 300px;
}

img {
    max-height: 300px;
    max-width: 100%;
    min-width: 100%;
    vertical-align: bottom;
}

但这会在图像上产生一些轻微的拉伸。

这个想法是让行占据任意数量的垂直空间，以使图像适合该行，同时保持其各自的纵横比。

Answer 1

我认为object-fit contain在这方面可能会有所帮助。然而，在所有图像的高度都相同的情况下，它到底是看起来“最好”，还是提高到最大高度，这取决于最终想要的效果。

这是一个代码片段，其中每个img都有一个最大高度(选择300px只是因为在问题的代码中有这个高度，当然可以是30vh或...)。也可以给每个img一个300px的高度，让它们排成一排。

​

#container {
    display: flex;
    flex-wrap: wrap;
}

.image {
    flex-grow: 1;
    margin: 2px;
    height: 300px;
    width: auto;
    max-width: 100%;
}

img {
    max-height: 300px;
    max-width: 100%;
    min-width: 100%;
    object-fit: contain;
}

<div id='container'>
    <div class='image'>
        <img src='https://via.placeholder.com/300x300.jpg' alt=''>
    </div>

    <div class='image'>
        <img src='https://via.placeholder.com/400x200.jpg' alt=''>
    </div>

    <div class='image'>
        <img src='https://via.placeholder.com/200x400.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/600x300.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/1024x768.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/150x150.jpg' alt=''>
    </div>
</div>

​