[CSS, HTML, Разработка веб-сайтов] Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был "Царём горы", наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
background-size: cover;
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
object-fit: cover;
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Использование background-size: cover
В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.
Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style. Рекомендуется использовать aria-label, который заменит атрибут alt, присутствующий в тегах img.
<article class="card">
<div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>
Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom, позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:
.card__img {
background-size: cover;
background-position: center;
/* Соотношение сторон 16:9 */
padding-bottom: 62.5%;
}
Всё вместе это будет выглядеть следующим образом:
Извините, данный ресурс не поддреживается. :(
Использование object-fit: cover
Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16
Это свойство применяется непосредственно к тегу img, поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt:
<article class="card">
<img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>
Затем CSS-код дополняется свойством height, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit, которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height:
.card__img {
object-fit: cover;
height: 30vh;
}
В результате получаем следующее:
Извините, данный ресурс не поддреживается. :(
Когда использовать каждое из решений
Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).
Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон.
Когда следует выбирать background-size:
- при использовании с контейнером, в котором предполагается размещать какое-то содержимое. Например, с шапкой сайта
- если необходимо применить дополнительные эффекты с помощью псевдоэлементов, которые нельзя использовать с тегом img
- если изображение носит декоративный характер и не потребности в семантике тега img
Когда следует выбирать object-fit:
- использование стандартного тега img лучше всего подходит для контекстных изображений, позволяя сохранить семантику
===========
Источник:
habr.com
===========
===========
Автор оригинала: Stephanie Eckles
===========Похожие новости:
- [Angular, CSS, HTML, Работа с векторной графикой] Нативный способ покрасить SVG-иконки
- [Карьера в IT-индустрии] Бесплатные образовательные курсы: фронтенд-разработка
- [CSS, HTML, Разработка веб-сайтов] Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid (перевод)
- [Angular, Разработка веб-сайтов] Ленивая подгрузка переводов с Angular
- [Разработка веб-сайтов, CSS, HTML] Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы (перевод)
- [JavaScript, Программирование, Разработка веб-сайтов] Работа с файлами в JavaScript
- [Big Data, Python, Машинное обучение, Программирование] Почему стоит начать использовать FastAPI прямо сейчас (перевод)
- [JavaScript, ReactJS, Разработка веб-сайтов] Debouncing с помощью React Hooks: хук для функций
- [Веб-аналитика, Веб-дизайн, Медийная реклама, Разработка веб-сайтов] Игра не по правилам: опыт участия в известном российском конкурсе проектов
- [UML Design, Анализ и проектирование систем, Программирование, Разработка веб-сайтов] UML для самых маленьких: диаграмма классов
Теги для поиска: #_css, #_html, #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_web_development, #_frontend, #_html, #_layout, #_verstka (вёрстка), #_razrabotka_vebsajtov (разработка веб-сайтов), #_css, #_html, #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 19:31
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles  Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика. В не очень далёком прошлом, когда JQuery ещё был "Царём горы", наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это: background-size: cover;
Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться. Альтернативный метод использует стандартный тег img и магию свойства object-fit: cover;
Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них. Использование background-size: cover В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов. Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style. Рекомендуется использовать aria-label, который заменит атрибут alt, присутствующий в тегах img. <article class="card">
<div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div> <div class="card__content"> <h3>Whizzbang Widget SuperDeluxe</h3> <p> Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. </p> <a href="#" class="button">Add to Cart</a> </div> </article> Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom, позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение: .card__img {
background-size: cover; background-position: center; /* Соотношение сторон 16:9 */ padding-bottom: 62.5%; } Всё вместе это будет выглядеть следующим образом: Извините, данный ресурс не поддреживается. :( Использование object-fit: cover Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16 Это свойство применяется непосредственно к тегу img, поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt: <article class="card">
<img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/> <div class="card__content"> <h3>Whizzbang Widget SuperDeluxe</h3> <p> Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. </p> <a href="#" class="button">Add to Cart</a> </div> </article> Затем CSS-код дополняется свойством height, которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit, которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height: .card__img {
object-fit: cover; height: 30vh; } В результате получаем следующее: Извините, данный ресурс не поддреживается. :( Когда использовать каждое из решений Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования). Оба решения позволяют получить полноразмерное адаптивное изображение, основанное на контролируемом вами соотношении сторон. Когда следует выбирать background-size:
Когда следует выбирать object-fit:
=========== Источник: habr.com =========== =========== Автор оригинала: Stephanie Eckles ===========Похожие новости:
Разработка веб-сайтов ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 19:31
Часовой пояс: UTC + 5