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

Дата публикации: 2018-09-13

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

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

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

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

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

.myImg {

background-image: url("my-image.png");

background-size: cover;

}

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

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

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

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

.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;
}

.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;
}

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>