Создание сетки изображений с наложениями с помощью подгонки объектов - Джонатан Харрелл

1. По старому
2. Новый Путь
3. Поддержка браузера
4. Заключение

Подумайте, сколько раз вы кодировали сетку изображений с наложением, которое появляется при наведении и отображает какой-то текст - будь то чисто описательный или ссылку на статью или страницу. Я чувствую, что должен сделать это почти для каждого веб-сайта, над которым я работаю.

Был шаблон, который я использовал с фоновыми изображениями, который работал, но не использовал адаптивные изображения и не был настолько семантическим, как мог бы быть. Теперь, когда свойство подгонки объекта получает более широкую поддержку, лучше добиться этого.

Что мы построим: сетка тизеров статей с наложением изображения и текста при наведении курсора.

По старому

Вот как я это делал:

<article class = "blog-post-teaser"> <div class = "image" style = "background-image: url (...)"> </ div> <div class = "overlay"> <h1> < a href = "..."> Название статьи </a> </ h1> </ div> </ article>

Разметка включала в себя статью, содержащую простой div с примененным фоновым изображением, и оверлейный div, который содержал текст, который должен располагаться поверх изображения. Я бы тогда абсолютно позиционировал и изображение и оверлей. Размер div будет определяться небольшим процентным трюком для заполнения статьи:

.blog-post-teaser {позиция: относительная; набивка: 30% 0; } .blog-post-teaser .image {позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; } .blog-post-teaser .overlay {position: absolute; верх: 0; слева: 0; ширина: 100%; высота: 100%; }

Такой подход дает нам много контроля, но на самом деле он не такой семантический, как мог бы быть. Изображение для каждой статьи кажется довольно важным содержимым, и браузер не знает, что это изображение. И мы не можем кормить alt-тегами, чтобы помочь с SEO.

Как улучшить семантику, сохраняя контроль размера изображения, чтобы все хорошо вписывалось в сетку? Введите объект подгонки.

Новый Путь

Вот как выглядит моя разметка сейчас:

<article class = "blog-post-teaser"> <figure> <img src = "..." alt = "..."> <figcaption> <h1> <a href="..."> Название статьи </a> </ h1> </ figcaption> </ figure> </ article>

Теперь браузер знает, что мы подаем изображение. Он даже знает, что заголовок статьи - это и заголовок статьи, и подпись к изображению. Поисковые системы теперь могут получить доступ к альтернативному тексту. Давайте посмотрим на стиль:

.blog-post-teaser figure {позиция: относительная; набивка: 30% 0; } .blog-post-teaser figcaption {позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; } .blog-post-teaser img {позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; подгонка объекта: крышка; }

Он почти идентичен, только теперь мы используем элемент figure для управления размерами и используем свойство object-fit для элемента image. Это работает точно так же, как установка background-size: cover. Изображение заполнит указанное пространство без растяжения.

Поддержка браузера

В настоящее время подгонка объекта не поддерживается в IE или Edge, но есть простой polyfill Вы можете использовать для преобразования изображения в фоновое изображение в этих браузерах.

Заключение

Проверьте живое демо чтобы увидеть стили в действии, а также некоторые дополнительные эффекты градиента и наведения, чтобы сделать его более привлекательным.

Похожие

Комментарии