Свойство object-fit для изображений: Тренажер CSS

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

Эта серия упражнений посвящена свойству CSS `object-fit`. Вы научитесь управлять тем, как содержимое заменяемых элементов, в первую очередь изображений (`<img>`), вписывается в контейнер с заданными размерами. Свойство `object-fit` особенно полезно, когда размеры изображения не соответствуют размерам его контейнера. В этих заданиях вы будете дописывать CSS-код, чтобы применять различные значения `object-fit` (`fill`, `contain`, `cover`, `none`, `scale-down`) и `object-position`, наблюдая за результатом в реальном времени. Задания построены от простого к сложному, помогая закрепить понимание каждого значения и их влияния на отображение изображений.

Список тем

Знакомство с object-fit: Contain

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

CSS

.image-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden; /* Добавлено для наглядности границ */
}

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

                     .image-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden; /* Добавлено для наглядности границ */
}

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

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">
</div>

Чтобы изображение масштабировалось с сохранением пропорций и полностью поместилось внутри контейнера, используйте свойство `object-fit` со значением `contain` для тега `img`.

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

Результат

Сообщения

Выполнить

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

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

Заполнение контейнера: Cover

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

CSS

.image-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: input1;
}

                     .image-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Пример изображения 2">
</div>

Для полного заполнения контейнера с сохранением пропорций (и возможной обрезкой) используйте свойство `object-fit` со значением `cover`.

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

Результат

Сообщения

Выполнить

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

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

Растягивание изображения: Fill

Иногда требуется, чтобы изображение заполнило контейнер полностью, даже если это приведет к искажению пропорций. Примените соответствующее значение `object-fit`, чтобы добиться такого эффекта.

CSS

.image-container {
  width: 250px;
  height: 100px; /* Непропорциональный контейнер */
  border: 1px solid #ccc;
}

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

                     .image-container {
  width: 250px;
  height: 100px; /* Непропорциональный контейнер */
  border: 1px solid #ccc;
}

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

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/4.png" alt="Пример изображения 4">
</div>

Значение `fill` для свойства `object-fit` растягивает или сжимает изображение, чтобы оно точно соответствовало размерам контейнера, игнорируя исходные пропорции. Это значение используется по умолчанию, если `object-fit` не указано.

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

Результат

Сообщения

Выполнить

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

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

Без масштабирования: None

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

CSS

.image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы видеть обрезку */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: input1;
}

                     .image-container {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden; /* Чтобы видеть обрезку */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: input1;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Пример изображения 5">
</div>

Чтобы отменить любое масштабирование и отобразить изображение в его оригинальном размере (с возможной обрезкой), используйте значение `none` для свойства `object-fit`.

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

Результат

Сообщения

Выполнить

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

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

Умное масштабирование: Scale-down

Используйте значение `object-fit`, которое выберет наименьший итоговый размер изображения между вариантами `none` и `contain`. То есть, если изображение меньше контейнера, оно отобразится как при `none`, а если больше — как при `contain`.

CSS

.image-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

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

                     .image-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

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

HTML

<div class="image-container">
  <!-- Изображение меньше контейнера -->
  <img src="https://naytikurs.ru/img/6.png" alt="Маленькое изображение 6" style="width: 100px; height: auto; display: block; margin-bottom: 10px;">
  
  <!-- Изображение больше контейнера -->
  <img src="https://naytikurs.ru/img/7.png" alt="Большое изображение 7" style="width: 100%; height: 100%;">
</div>

<!-- Дополнительный CSS для второго изображения -->
<style>
  .image-container img:last-child {
    input1: input2;
  }
</style>

Значение `scale-down` сравнивает результат применения `none` и `contain` и выбирает тот, при котором изображение будет меньше или равно своим исходным размерам и размерам контейнера.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование изображения: object-position

Изображение настроено с `object-fit: cover`, но важная часть (например, верхняя) обрезается. Ваша задача — сдвинуть видимую область изображения так, чтобы была видна его верхняя часть.

CSS

.image-container {
  width: 250px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3; /* Позиция по X и Y */
}

                     .image-container {
  width: 250px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3; /* Позиция по X и Y */
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/8.png" alt="Пример изображения 8">
</div>

Используйте свойство `object-position` вместе с `object-fit`. Оно принимает значения, похожие на `background-position` (например, `center top`, `50% 0%`, `left bottom`). Чтобы показать верхнюю часть, используйте значение, которое смещает фокус к верху.

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

Результат

Сообщения

Выполнить

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

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

Практика: Выбор object-fit

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

CSS

.image-container {
  width: 200px;
  height: 200px;
  border: 1px solid #555;
  display: flex; /* Используем flex для центрирования на всякий случай */
  align-items: center;
  justify-content: center;
}

.image-container img {
  width: 100%;
  height: 100%;
  input1: input2;
  /* Возможно, потребуется object-position, если стандартное поведение не устроит */
}

                     .image-container {
  width: 200px;
  height: 200px;
  border: 1px solid #555;
  display: flex; /* Используем flex для центрирования на всякий случай */
  align-items: center;
  justify-content: center;
}

.image-container img {
  width: 100%;
  height: 100%;
  input1: input2;
  /* Возможно, потребуется object-position, если стандартное поведение не устроит */
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/9.png" alt="Пример изображения 9">
</div>

Эта задача требует комбинации знаний. Сначала подумайте, какое значение `object-fit` лучше всего подходит под описание (`contain` или `scale-down`). Затем, если изображение меньше контейнера и выравнивается не по центру, может понадобиться `object-position: center center;` (хотя `contain` и `scale-down` обычно центрируют по умолчанию).

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

Результат

Сообщения

Выполнить

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

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