Как сделать изображения адаптивными с помощью CSS

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

Как сделать изображения адаптивными с помощью CSS

Что мне следует использовать: относительные или абсолютные единицы?

Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на свой веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их оба с помощью CSS.

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

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

img {
  width: 500px;
}

Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.

img {
  width: 50%;
}

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

Стоит ли использовать медиа-запросы?

Один из вопросов, который мне задают чаще всего, - следует ли вам использовать медиа-запросы или нет.

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

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

Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, вам понадобится помощь с помощью медиа-запросов:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.

Почему свойство max-width не очень хорошее?

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

Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.

Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).

Например, если изображение имеет ширину по умолчанию 500 пикселей, а размер вашего экрана составляет всего 360 пикселей, вы не сможете увидеть полное изображение, потому что недостаточно места:

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}

Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 пикселей до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.

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

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

Чтобы исправить это, вам нужно снова использовать свойство width, что делает бесполезным свойство max-width.

А что насчет высоты?

Другая распространенная проблема, с которой вы можете столкнуться, связана со свойством высоты. Обычно высота изображения автоматически изменяется, поэтому вам не нужно назначать свойство высоты вашим изображениям (потому что это как бы ломает изображение).

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

img {
  width: 100%;
  height: 300px;
}

К счастью, есть еще одно свойство, которое предлагает CSS для решения этой проблемы ...

Решение: свойство Object-Fit

Чтобы иметь больший контроль над вашими изображениями, CSS предоставляет другое свойство, называемое object-fit. Давайте воспользуемся свойством object-fit и присвоим значение, которое улучшит внешний вид вашего изображения:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

При необходимости вы также можете использовать свойство object-position (в дополнение к object-fit), чтобы сфокусироваться на определенной части изображения. Многие люди не знают о свойстве соответствия объектам, но это может быть полезно для решения подобных проблем.

Надеемся, этот пост помог вам понять и решить ваши проблемы с адаптивными изображениями.