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

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

способ «Ой, мне это нужно как можно быстрее».

В пятницу 17: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%;
/* even more control with max-width */
  max-width: 720px;
}

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

Способ производительности (расширенный)

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

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

Вы можете комбинировать их с HTML 5 <picture> тег, который изящно деградирует с помощью an <img>.

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

Чтобы подытожить

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