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

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

Способ: мне нужно это срочно

Если к концу рабочего дня в пятницу картинка не хочет соответствовать размерам макета, самое время вспомнить про background:

.myImg {
    background-image: url("image.jpg");
    background-size: cover;
}

Этот способ уже всем надоел. Это читинг.

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

Способ из будущего

А что Вы скажете, если метод, описанный выше, можно использовать для img? Что же, скажите “Привет!” CSS свойству object-fit, которое работает, в том числе, и для видео:

.myImg {
    object-fit: cover;
    width: 320px;
    height: 180px;
}

Прекрасно. Вы видите, как используется наше любимое значение cover, а еще мы можем указать contain.

В чем подвох?

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

Способ “Netflix”

Вы скажете: “Прикольно. Еще один способ, который не работает с IE и браузерами старых версий”. Не беспокойтесь, вот мой любимый метод, и он работает всегда и везде. Нам нужно всего-лишь обернуть картинку в блок с относительными отступами (relative padded parent).

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

.wrapper {
    position: relative;
    padding-top: 56.25%; /* Отношение сторон: 16:9 */
}
img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

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

Простой способ

Ну и конечно, Вы должны знать такой метод:

img {
    height: auto;
    width: 100%;
    /* max-width позволит контролировать размеры*/
    max-width: 720px;
}

Если Ваш макет достаточно прост, это способ обязательно подойдет.

Производительный способ

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

Для современных браузеров есть srcset - свойство, позволяющее выбирать загружаемые картинки в зависимости от ширины экрана. Используется в сочетании с HTML5 тегом picture и соответсвует прниципам постепенной деградации (graceful degradation):

<picture>
    <source media="(max-width: 799px)" srcset="480w.jpg">
    <source media="(min-width: 800px)" srcset="800w.jpg">
    <img src="800w.jpg">
</picture>

Заключение

1. Если картинка не имеет контентного значения (то есть бесполезна для SEO), пользуйтесь background-image,
2. Если IE не Ваша тема, пользуйтесь object-fit,
3. Метод с относительными отступами, который так любит Netflix, будет работать всегда и везде,
4. Если верстка достаточно проста, Вам поможет height: auto;,
5. Если нужно поработать над скоростью загрузки изображений, используйте srcset.

Спасибо за внимание.

Подготовлено по материалам оригинальной статьи Adrien Zaganelli “Time-saving CSS techniques to create responsive images”.