如何制作像 Facebook 一样的照片库？

Question

我正在制作一个 4x3 图片库，其中包含来自数据库的图片。 所有图片都有不同的尺寸。 使用 Bootstrap 和 CodeIgniter 我为每个图像制作行和列。 现在我想要宽图片适合行的高度，水平居中并隐藏水平溢出。 我还希望高大的图片适合列的宽度，垂直居中并隐藏垂直溢出。就像 Facebook。

左边距：自动； 边距右：自动；不要将图像居中。

我的索引页面：

<h1><?=$title?></h1>

<?php $i = 1; foreach ($photos as $photo) {
    if ( $i % 3 == 1 ) { ?>
        <div class="row gallery-row">
    <?php } ?>
    <div class="col-md-4">
        <img class="gallery-image" src="<?php echo site_url(); ?>assets/images/<?php echo $photo['photo_name'];?>">
    </div>
    <?php if ( $i % 3 == 0 ) { ?>
        </div>
    <?php }
    $i++;
} ?>

我的 CSS：

.row.gallery-row{
    height: 25%;
}

.gallery-image{
    height : 100%;
    overflow:hidden;
    display: table-cell;
    text-align: center;
}

我得到的最接近的是上面的 CSS：图像适合行的高度并且溢出被隐藏。 我仍然希望图像居中，如果图像高然后宽，他们应该优先适应宽度。 这是页面的样子

左下角的图片上有一个女人，但它没有显示，因为它没有居中。

解决方案：我将我的 css 更改为：

.gallery-image{
    height : 100%;
    width : 100%;
    object-fit: cover;
}

我的页面现在看起来像这样： 在行之间添加一些填充将使它看起来像 facebook。

Answer 1

也许在你的.gallery-image css 中添加object-fit 是你想要的。