Галерея изображений с помощью свойства 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; }
Обратите внимание, свойство object-position пока не поддерживается браузером Safari.
Заключение
Подписи изображений немного сдвинуты для создания адаптивности.
Посмотрите на результат и полный код ниже:
Использованы фотографии Feng Yi, лицензированные по лицензии Creative Commons.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191