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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

Способ “Netflix”

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

Резюмируя

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

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

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

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

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

Автор: Adrien Zaganelli

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree