Свойство CSS object-position
Вместе со свойством object-fit свойство CSS object-position использует координаты x/y, чтобы разместить <img> или <video> внутри контейнера.
Оно принимает два значения: первое относится к оси x, а второе — к оси y. Допускаются и строки (left, center или right), и числа (в px или %), а также отрицательные значения.
Использование свойства object-position
Иногда видимая часть изображения оказывается не той, на которую вы рассчитывали. Изменив object-position, вы покажете именно ту часть, которая вам нужна.
Позиционирование здания по центру
При object-position: 80% 100% величественное старинное здание оказывается в центре изображения.
Prompt
Создайте страницу с контейнером 200x300px и сплошной чёрной рамкой 1px. Разместите внутри изображение, используя object-fit: cover и object-position: 80% 100%, чтобы сфокусироваться на определённой части изображения. Используйте любой URL широкого пейзажного изображения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Building Center</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Позиционирование Эйфелевой башни по центру
При object-position: 15% 100% Эйфелева башня оказывается в центре изображения.
Prompt
Создайте страницу с контейнером 200x300px и сплошной чёрной рамкой 1px. Разместите внутри изображение, используя object-fit: cover и object-position: 15% 100%, чтобы сфокусироваться на другой части изображения. Используйте любой URL широкого пейзажного изображения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Eiffel Tower</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>