Свойство object-fit в CSS
Когда <img> или <video> должен вписаться в свой контейнер, свойство CSS object-fit решает, как изменится его размер.
Вы можете выбрать одно из этих значений:
- fill — значение по умолчанию. За счёт растягивания или сжатия изображение заполняет контейнер, а соотношение сторон теряется.
- cover — изображение заполняет контейнер и сохраняет соотношение сторон, а всё выступающее при необходимости обрезается.
- contain — всё изображение остаётся внутри контейнера с неизменным соотношением сторон. Ничего не обрезается, и может остаться пустое пространство.
- none — размер не изменяется.
- scale-down — изображение уменьшается до того из вариантов
noneилиcontain, который даёт меньшую версию.
Использование object-fit: fill;
При object-fit: fill; контейнер заполняется за счёт растягивания или сжатия изображения, а соотношение сторон теряется.
Пример
Prompt
Покажите изображение внутри контейнера 200x300px с чёрной рамкой, используя
object-fit: fill;. Изображение должно растягиваться, чтобы заполнить контейнер, игнорируя пропорции.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: fill</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Using object-fit: fill</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Использование object-fit: cover;
При object-fit: cover; изображение заполняет контейнер с исходным соотношением сторон, а вписаться ему помогает обрезка.
Пример
Prompt
Покажите изображение внутри контейнера 200x300px с чёрной рамкой, используя
object-fit: cover;. Изображение должно заполнять контейнер, сохраняя пропорции, обрезая лишнее при необходимости.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: cover</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Использование object-fit: contain;
При object-fit: contain; ничего не обрезается: изображение находится внутри контейнера с исходным соотношением сторон, а оставшаяся область остаётся пустой.
Пример
Prompt
Покажите изображение внутри контейнера 200x300px с чёрной рамкой, используя
object-fit: contain;. Изображение должно вписываться в контейнер, сохраняя пропорции, оставляя пустое пространство при необходимости.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: contain</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Using object-fit: contain</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Использование object-fit: none;
При object-fit: none; изображение сохраняет свой размер, без изменения размера и масштабирования.
Пример
Prompt
Покажите изображение внутри контейнера 200x300px с чёрной рамкой, используя
object-fit: none;. Размер изображения не должен изменяться или масштабироваться.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: none</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<h2>Using object-fit: none</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Использование object-fit: scale-down;
При object-fit: scale-down; изображение уменьшается до того из вариантов none или contain, который даёт меньшую версию.
Пример
Prompt
Покажите изображение внутри контейнера 200x300px с чёрной рамкой, используя
object-fit: scale-down;. Изображение должно быть уменьшено до наименьшего варианта из none или contain.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: scale-down</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Using object-fit: scale-down</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Ещё один пример
В этой раскладке каждое из двух изображений должно занимать 50% ширины браузера и 100% высоты контейнера.
Без object-fit
Измените размер браузера, и без object-fit изображения потеряют соотношение сторон.
Prompt
Покажите два изображения рядом, каждое из которых занимает 50% ширины браузера и 100% контейнера высотой 400px, не используя object-fit. Изображения должны выглядеть растянутыми/искажёнными.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images Without object-fit</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<h2>Two Images - Without object-fit</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
С object-fit: cover
Добавьте object-fit: cover;, и изображения сохранят соотношение сторон при изменении размера браузера.
Prompt
Покажите два изображения рядом, каждое из которых занимает 50% ширины браузера и 100% контейнера высотой 400px, используя
object-fit: cover;, чтобы сохранить пропорции обоих изображений.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images With object-fit: cover</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Two Images - With object-fit: cover</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>