Найти тему
Ready

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

Оглавление

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

1) Быстрое решение:

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

-2

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

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

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

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

-3

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

3) Решение Netflix:

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

-4

4) Простое решение:

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

-5

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

5) Продвинутое решение:

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

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

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

-6

Статья была полезной?)

Тогда подписывайся, чтобы не потерять годный контент!