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

Question

我正在使用数据库中的图片处理4x3图片库。 所有图片都有不同的尺寸。 使用Bootstrap和CodeIgniter，我为每个图像创建行和列。 现在，我希望宽图片适合行的高度，水平居中并隐藏水平溢出。 我还希望高大的图片适合列的宽度，垂直居中并隐藏垂直溢出。就像Facebook。

margin-left：自动； 右边距：自动；不要将图像居中。

我的索引页：

<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。