时间戳

首页 > 解决方案 > 不使用 object-fit 的 CSS 图像网格：cover

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

问题描述

基本上试图实现 Adob​​e 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;
}

但这会给图像带来一些轻微的拉伸。

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

标签： htmlcssimagegridresponsive

解决方案

我认为 object-fit contains 在这里可能会有所帮助。但是，究竟是在所有图像高度相同的情况下看起来“最好”，还是例如达到最大高度，这取决于最终想要的效果。

这是一个片段，其中每个 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>

推荐阅读