Адаптивные изображения: 5 трюков CSS для экономии времени

0
9631
Добавить в избранное

У веб-разработчика два врага: дедлайны и изображения. Хватит пытаться втиснуть картинку в макет! Вот 5 методов для полного контроля над графикой.

адаптивные изображения

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

Быстрое решение

Легким движением руки изображение превращается… в элегантный фон!

Все мы хоть раз пользовались этим читерским приемом.

Свойство background отлично работает, но помните, что использовать его следует только для изображений, не относящихся напрямую к контенту, и в некоторых особых случаях.

Решение из будущего

У тега <img> тоже существует одно чудесное свойство – object-fit. Кстати, оно работает и для видео-контейнеров.

Вот и все! object-fit управляет размещением элемента, если ширина и высота отличаются от его настоящего размера. Вместо cover можно использовать значение contain.

В чем подвох?

К сожалению, свойство не работает в IE и старых версиях Safari, но для них есть полифилл.

Решение Netflix

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

Эта техника может показаться сложной, но она стоит того, чтобы потратить время и разобраться. Ее используют многие сайты, включая Netflix!

Маленький демо-пример:

Простое решение

Вероятно, вы его уже знаете и не раз использовали:

Если у вас не очень сложная разметка, эту технику можно использовать везде.

Продвинутое решение

К тому же самое производительное, если говорить о времени загрузки. Тяжелое изображение может существенно замедлить вашу веб-страницу, особенно на мобильных гаджетах.

В современных браузерах адрес изображения может изменяться в зависимости от ширины окна. Для этого существует атрибут srcset!

Его можно комбинировать с тегом HTML5 <picture>, который обеспечивает изящную деградацию до простого <img>.

Адаптивные изображения

    • Используйте background-image, если изображение не является частью контента страницы.
    • Используйте object-fit, если вам не требуется поддержка IE.
    • Техника контейнера с паддингами, используемая Netflix, работает везде.
    • В большинстве случаев достаточно просто добавить свойство height: auto.
    • Если вам нужна производительность, используйте srcset для загрузки небольших изображений на маленьких экранах.

Вам может быть интересно

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Оставьте комментарий