Свойство object-position: Тренажер CSS

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

Эта серия упражнений посвящена свойству CSS `object-position`. Оно используется для управления выравниванием содержимого заменяемых элементов (таких как `<img>` или `<video>`) внутри их контейнера, когда для них установлено свойство `object-fit` со значением, отличным от `fill` (например, `contain` или `cover`). Вы будете практиковаться в использовании различных значений `object-position`, включая ключевые слова (например, `top`, `center`, `bottom`, `left`, `right`) и числовые значения (пиксели, проценты), чтобы точно позиционировать видимую часть изображения или видео. Задания построены от простого к сложному, начиная с базовых ключевых слов и заканчивая комбинациями значений и использованием отрицательных смещений.

Список тем

Центрирование изображения

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

CSS

.image-container {
  width: 250px;
  height: 300px;
  border: 2px solid #ccc;
  overflow: hidden; /* Чтобы видеть эффект object-fit */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3; /* Центрируем изображение */
}

                     .image-container {
  width: 250px;
  height: 300px;
  border: 2px solid #ccc;
  overflow: hidden; /* Чтобы видеть эффект object-fit */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  input1: input2 input3; /* Центрируем изображение */
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Example Image 1">
</div>

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

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

Результат

Сообщения

Выполнить

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

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

Позиционирование в верхнем левом углу

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

CSS

.image-container {
  width: 300px;
  height: 250px;
  border: 2px solid #aaa;
  overflow: hidden;
}

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

                     .image-container {
  width: 300px;
  height: 250px;
  border: 2px solid #aaa;
  overflow: hidden;
}

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

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/2.png" alt="Example Image 2">
</div>

Для позиционирования в верхнем левом углу используйте ключевые слова `left` для горизонтальной оси и `top` для вертикальной оси в свойстве `object-position`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование в правом нижнем углу

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

CSS

.image-container {
  width: 280px;
  height: 280px;
  border: 2px solid #999;
  overflow: hidden;
}

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

                     .image-container {
  width: 280px;
  height: 280px;
  border: 2px solid #999;
  overflow: hidden;
}

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

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/4.png" alt="Example Image 4">
</div>

Для позиционирования в правом нижнем углу используйте ключевые слова `right` и `bottom` для свойства `object-position`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование по центру сверху

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

CSS

.container {
  width: 350px;
  height: 200px;
  border: 1px solid #eee;
  overflow: hidden;
}

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

                     .container {
  width: 350px;
  height: 200px;
  border: 1px solid #eee;
  overflow: hidden;
}

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

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/5.png" alt="Example Image 5">
</div>

Первое значение `object-position` отвечает за горизонтальное положение (`center`), второе — за вертикальное (`top`).

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

Результат

Сообщения

Выполнить

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

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

Позиционирование с процентным значением

Используя `object-fit: contain`, изображение вписано в контейнер. Сместите изображение так, чтобы его левый край находился на 25% ширины контейнера, а верхний край — на 75% высоты контейнера. Используйте процентные значения.

CSS

.box {
  width: 300px;
  height: 300px;
  border: 2px dashed #f00;
  background-color: #f0f0f0;
}

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

                     .box {
  width: 300px;
  height: 300px;
  border: 2px dashed #f00;
  background-color: #f0f0f0;
}

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

HTML

<div class="box">
  <img src="https://naytikurs.ru/img/6.png" alt="Example Image 6">
</div>

Свойство `object-position` принимает процентные значения. Первое значение (горизонтальное смещение) должно быть `25%`, второе (вертикальное смещение) — `75%`.

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

Результат

Сообщения

Выполнить

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

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

Позиционирование с пиксельным значением

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

CSS

.frame {
  width: 200px;
  height: 350px;
  border: 3px solid #00f;
  overflow: hidden;
}

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

                     .frame {
  width: 200px;
  height: 350px;
  border: 3px solid #00f;
  overflow: hidden;
}

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

HTML

<div class="frame">
  <img src="https://naytikurs.ru/img/7.png" alt="Example Image 7">
</div>

Для смещения на 10px вправо и 30px вниз используйте значения `10px` и `30px` для свойства `object-position`.

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

Результат

Сообщения

Выполнить

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

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

Смешанные единицы: проценты и пиксели

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

CSS

.image-wrapper {
  width: 320px;
  height: 240px;
  border: 1px solid #ccc;
  overflow: hidden;
}

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

                     .image-wrapper {
  width: 320px;
  height: 240px;
  border: 1px solid #ccc;
  overflow: hidden;
}

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

HTML

<div class="image-wrapper">
  <img src="https://naytikurs.ru/img/8.png" alt="Example Image 8">
</div>

Для выравнивания по правому краю используйте ключевое слово `right` (или `100%`). Для смещения на 20px вниз используйте `20px`. Порядок: горизонтальное, затем вертикальное значение.

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

Результат

Сообщения

Выполнить

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

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

Отрицательное смещение

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

CSS

.crop-container {
  width: 250px;
  height: 300px;
  border: 2px solid #ff8c00;
  overflow: hidden;
}

.crop-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: input1 input2;
}

                     .crop-container {
  width: 250px;
  height: 300px;
  border: 2px solid #ff8c00;
  overflow: hidden;
}

.crop-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: input1 input2;
}

HTML

<div class="crop-container">
  <img src="https://naytikurs.ru/img/9.png" alt="Example Image 9">
</div>

Чтобы сместить изображение влево за пределы левого края, используйте отрицательное значение в пикселях для горизонтальной позиции ( `-50px`). Для вертикального центрирования используйте `center` (или `50%`).

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

Результат

Сообщения

Выполнить

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

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