Как мне сделать фотогалерею вроде Facebook? - PullRequest
Новая
       14

Как мне сделать фотогалерею вроде Facebook?

1 голос
/ 26 июня 2019

Я работаю над галереей изображений 4х3 с изображениями из базы данных. Все картинки имеют разные размеры. Используя 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 выше: изображения соответствуют высоте строки, а переполнение скрыто. Я по-прежнему хочу, чтобы изображения центрировались, и если они выше, чем по ширине, они должны располагаться по ширине. Вот как выглядит страница image

На левом нижнем рисунке изображена женщина, но она не отображается, потому что она не отцентрирована.

Решение: я изменил свой css на: 

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

Моя страница теперь выглядит так: image Добавление некоторого отступа между рядами сделает его похожим на Facebook.

1 Ответ

0 голосов
/ 26 июня 2019

Возможно добавление object-fit в ваш .gallery-image css - это то, что вы хотите.

...