Экономящие время техники CSS для создания адаптивных изображений

Экономящие время техники CSS для создания адаптивных изображений

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

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

Способ «Мне это нужно как можно скорее»

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

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

Звучит знакомо? Мы все делали это когда-то, хотя немного похоже на чит? Использование свойств background очень полезно, они просто работают. Тем не менее, помните, что вы должны использовать их только для неконтентных изображений или в качестве замены текста и в некоторых исключительных случаях.

Мой способ из будущего

Что, если я вам скажу, что такая магия существует и для элементов img? Скажите «Привет!» свойству object-fit, которое также работает и с видео, кстати!

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

Это все! Посмотрите, как, когда мы извлечем значение cover, мы также можем использовать contain.

ОК, в чем подвох?

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

Способ “Netflix”

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

Мы сохраним соотношение сторон изображения в процентах от свойства padding. Ваше изображение будет полноразмерным абсолютным дочерним элементом. Код выглядит так:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */
} img { position: absolute; left: 0; top: 0; width: 100%; height: auto;
}

«Эй, старик, это выглядит сложным». Как только вы поймете концепцию, все остальное будет просто. Netflix использует это!

Небольшая демо-версия:

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

Вы уже знаете это:

img { height: auto; width: 100%; /* еще больше контроля с помощью max-width */ max-width: 720px;
}

Если ваш макет не слишком сложный, это работает в большинстве случаев.

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

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

Знаете ли вы, что в современных браузерах вы можете изменять источник изображения в зависимости от ширины страницы? Вот для чего предназначено srcset!

Вы можете комбинировать его с тегом HTML 5 picture, который изящно сочетается с img.

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

Резюмируя

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

Используйте object-fit, если вы не заботитесь об IE.

Техника контейнера с полями, используемая Netflix, работает везде.

В большинстве случаев просто добавьте в CSS height: auto;.

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

Автор: Adrien Zaganelli

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.