У веб-разработчика два врага: дедлайны и изображения. Хватит пытаться втиснуть картинку в макет! Вот 5 методов для полного контроля над графикой.
1) Быстрое решение:
Легким движением руки изображение превращается... в элегантный фон!
Все мы хоть раз пользовались этим читерским приемом, правда?
Свойство background отлично работает, но помните, что использовать его следует только для изображений, не относящихся напрямую к контенту, и в некоторых особых случаях.
2)Решение из будущего:
У тега <img> тоже существует одно чудесное свойство – object-fit. Кстати, оно работает и для видео-контейнеров.
Вот и все! object-fit управляет размещением элемента, если ширина и высота отличаются от его настоящего размера. Вместо cover можно использовать значение contain.
3) Решение Netflix:
Этот трюк работает везде и требует только обернуть изображение в дополнительный контейнер. Пропорции сохраняются с помощью паддингов, заданных в процентах, а картинка абсолютно позиционируется.
4) Простое решение:
Вероятно, вы его уже знаете и не раз использовали:
Если у вас не очень сложная разметка, эту технику можно использовать везде.
5) Продвинутое решение:
К тому же самое производительное, если говорить о времени загрузки. Тяжелое изображение может существенно замедлить вашу веб-страницу, особенно на мобильных гаджетах.
В современных браузерах адрес изображения может изменяться в зависимости от ширины окна. Для этого существует атрибут srcset!
Его можно комбинировать с тегом HTML5 <picture>, который обеспечивает изящную деградацию до простого <img>.
Статья была полезной?)
Тогда подписывайся, чтобы не потерять годный контент!