Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле

8 мая 2016 | Опубликовано в css | 2 Комментариев »

Большей части галерей изображений на сайтах нужно подгружать как минимум два варианта каждого изображения: уменьшенное изображение и его полноразмерную версию. У этого подхода есть свои преимущества, но и немало раздражающих недостатков. Свойство object-fit может использоваться для улучшения галерей изображений. Единственный недостаток этого способа — уменьшенные изображения будут выглядеть сжатыми в браузерах, которые не поддерживают это свойство, например, в старых версиях браузеров и браузере Internet Explorer.

Разметка

Основная разметка состоит из блока, в который вложено несколько элементов фигур:

<div id="o-gallery">
        <figure>
                <img src="backless.jpg" alt>
                <figcaption>Photograph of a woman in a backless dress</figcaption>
    </figure>
  …
</div>

Код CSS

Для расстановки изображений используется метод flexbox:

div#o-gallery {
        display: flex;
        justify-content: space-between;
        max-width: 1600px;
        margin: 0 auto;
}
div#o-gallery figure {
        flex: 1;
        max-width: 500px;
        transition: 1s;
        margin: 0;
}

Все изображения равной ширины:

div#o-gallery img {
        width: 200px;
        max-height: 200px;
        border: 1px solid;
        object-fit: cover;
        object-position: 0% 0%;
        transition: 1s;
        font-size: 0;
        line-height: 0;
}

object-position

Изображения со свойством object-fit: cover будут сфокусированы на своем центре, изменение их расположения основывается на тех же принципах, что и размещение фоновых изображений. Чтобы изображение начиналось в нижнем левом углу? воспользуемся свойством object-position со следующими значениями:

div#o-gallery img {
        object-position: 0% 0%;
}

При наведении указателя мыши на любой элемент фигуры, он увеличивается в ширину в два раза по сравнению с соседними элементами, изображение внутри расширяется до максимальных значений ширины и высоты, свойство object-fit не применяется:

div#o-gallery figure:hover {
        flex: 2;
}
div#o-gallery figure:hover img {
        width: 100%;
        max-height: 700px;
        object-fit: none;
}