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

Question

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

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

我的索引页：

<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 就是您想要的。

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

How do I make a photo-gallery like Facebook?

css

php

codeigniter

image-gallery