Адаптивные изображения: Тренажер CSS

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

В этом разделе вы попрактикуетесь в создании адаптивных изображений с использованием CSS. Адаптивные изображения корректно отображаются на устройствах с разным разрешением и размером экрана, подстраиваясь под доступное пространство. Задания охватывают базовые техники масштабирования, управление поведением изображения внутри контейнера с помощью `object-fit` и `object-position`, а также использование медиа-запросов для изменения стилей изображений в зависимости от характеристик экрана. Эти упражнения помогут закрепить навыки, необходимые для создания гибких и отзывчивых веб-интерфейсов.

Список тем

Базовая адаптивность изображения

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

CSS

.image-container {
  width: 80%; /* Пример ширины контейнера */
  border: 1px dashed #999;
  margin: 10px auto;
}

.image-container img {
  display: block;
  input1: 100%;
  input2: auto;
  margin-left: auto; /* Для центрирования, если изображение меньше контейнера */
  margin-right: auto;
}

                     .image-container {
  width: 80%; /* Пример ширины контейнера */
  border: 1px dashed #999;
  margin: 10px auto;
}

.image-container img {
  display: block;
  input1: 100%;
  input2: auto;
  margin-left: auto; /* Для центрирования, если изображение меньше контейнера */
  margin-right: auto;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Логотип HTML">
</div>

Чтобы изображение не выходило за пределы контейнера и масштабировалось вместе с ним, используйте свойство `max-width` со значением `100%`. Для автоматического сохранения пропорций при изменении ширины, установите свойство `height` в значение `auto`. Не забудьте добавить `display: block;` для изображения, чтобы убрать возможный нижний отступ.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Заполнение контейнера изображением (cover)

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

CSS

.image-box-cover {
  width: 250px;
  height: 180px;
  border: 2px solid #3498db;
  overflow: hidden; /* Важно скрыть части изображения, выходящие за рамки */
  margin: 10px auto;
}

.image-box-cover img {
  width: 100%;
  height: 100%;
  input1: input2;
}

                     .image-box-cover {
  width: 250px;
  height: 180px;
  border: 2px solid #3498db;
  overflow: hidden; /* Важно скрыть части изображения, выходящие за рамки */
  margin: 10px auto;
}

.image-box-cover img {
  width: 100%;
  height: 100%;
  input1: input2;
}

HTML

<div class="image-box-cover">
  <img src="https://naytikurs.ru/img/2.png" alt="Логотип CSS">
</div>

Чтобы изображение заполняло весь контейнер, сохраняя пропорции и обрезая лишнее, необходимо задать ему ту же ширину и высоту, что и у контейнера (например, `width: 100%; height: 100%;`). Затем используйте CSS свойство `object-fit` со значением `cover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вписывание изображения в контейнер (contain)

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

CSS

.image-box-contain {
  width: 280px;
  height: 150px;
  border: 2px solid #2ecc71;
  background-color: #f0f0f0; /* Фон, чтобы видеть пустые области */
  margin: 10px auto;
  display: flex; /* Используем flex для простого центрирования */
  justify-content: center;
  align-items: center;
}

.image-box-contain img {
  /* Размеры будут ограничены контейнером и object-fit */
  width: 100%; 
  height: 100%;
  input1: input2;
}

                     .image-box-contain {
  width: 280px;
  height: 150px;
  border: 2px solid #2ecc71;
  background-color: #f0f0f0; /* Фон, чтобы видеть пустые области */
  margin: 10px auto;
  display: flex; /* Используем flex для простого центрирования */
  justify-content: center;
  align-items: center;
}

.image-box-contain img {
  /* Размеры будут ограничены контейнером и object-fit */
  width: 100%; 
  height: 100%;
  input1: input2;
}

HTML

<div class="image-box-contain">
  <img src="https://naytikurs.ru/img/4.png" alt="Логотип JavaScript">
</div>

Аналогично предыдущему заданию, задайте изображению размеры контейнера (`width: 100%; height: 100%;`). Используйте свойство `object-fit`, но на этот раз со значением `contain`, чтобы изображение целиком поместилось в контейнер.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Позиционирование видимой части изображения

Когда используется `object-fit: cover` или `contain` и пропорции не совпадают, можно указать, какая часть изображения должна быть видимой или как оно должно быть выровнено внутри контейнера. Установите фокус на нижний правый угол изображения при использовании `object-fit: cover`.

CSS

.image-box-position {
  width: 200px;
  height: 260px;
  border: 2px solid #e74c3c;
  overflow: hidden;
  margin: 10px auto;
}

.image-box-position img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3;
}

                     .image-box-position {
  width: 200px;
  height: 260px;
  border: 2px solid #e74c3c;
  overflow: hidden;
  margin: 10px auto;
}

.image-box-position img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3;
}

HTML

<div class="image-box-position">
  <img src="https://naytikurs.ru/img/8.png" alt="Природа">
</div>

Для управления видимой областью изображения используется свойство `object-position`. Оно принимает два значения: первое для горизонтального смещения, второе для вертикального. Можно использовать ключевые слова (`top`, `bottom`, `left`, `right`, `center`) или процентные/пиксельные значения. Для фокуса на нижнем правом углу используйте значения `right bottom` или `100% 100%`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Адаптивное позиционирование с Media Queries

Адаптивный дизайн часто требует разного отображения элементов на разных экранах. Сделайте так, чтобы на узких экранах (шириной 300px или меньше) видимая часть изображения была сфокусирована на верхнем центре (`top center`), а на более широких экранах — оставалась по центру (`center center`). Используйте `object-fit: cover`.

CSS

.image-box-media {
  width: 90%; /* Ширина относительно iframe */
  max-width: 350px;
  height: 220px;
  border: 2px solid #f39c12;
  overflow: hidden;
  margin: 10px auto;
}

.image-box-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Позиционирование по умолчанию */
}

/* Правило для узких экранов */
input1 (input2: 300px) {
  .image-box-media img {
    input3: top center;
  }
}

                     .image-box-media {
  width: 90%; /* Ширина относительно iframe */
  max-width: 350px;
  height: 220px;
  border: 2px solid #f39c12;
  overflow: hidden;
  margin: 10px auto;
}

.image-box-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Позиционирование по умолчанию */
}

/* Правило для узких экранов */
input1 (input2: 300px) {
  .image-box-media img {
    input3: top center;
  }
}

HTML

<div class="image-box-media">
  <img src="https://naytikurs.ru/img/6.png" alt="Городской пейзаж">
</div>

Используйте медиа-запрос (`@media`) с условием максимальной ширины (`max-width: 300px`). Внутри этого медиа-запроса переопределите свойство `object-position` для селектора изображения, установив его в `top center` (или `50% 0%`). Вне медиа-запроса (в основных стилях) задайте `object-position: center;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку