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

Question

I am working on a 4x3 image gallery with pictures from a database. All pictures have different sizes. Using Bootstrap and CodeIgniter I make rows and columns for every image. Now I want wide pictures to fit the height of the row, center horizontally and hide the horizontal overflow. I also want that tall pictures fit the width of the column, center vertically and hide the vertical overflow. Just like Facebook.

margin-left: auto; margin-right: auto; don't center the image.

My index page:

<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++;
} ?>

My css:

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

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

The closest I get is with the CSS above: The images fit the height of the row and overflow is hidden. I still want the images to center and if the images are taller then wide they should prioritize fitting the width. Here is what the page looks like

The bottom left picture has a woman on it but it doesn't show because it isn't centered.

Solution: I changed my css to :

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

My page now looks like this: Adding some padding in between the rows will make it look just like facebook.

Answer 1

Maybe adding object-fit in your .gallery-image css is what you want.