CSS :: Свойство object-fit

css-свойство object-fit (от англ. object fit – подгонка объекта) определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.

Характеристики

Значение по умолчанию: fill.
Применяется: к заменяемым элементам таким как <img>, <input type="image">, <embed>, <object>, <iframe>, <canvas>, <audio> с элементами управления или <video>.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.objectFit="value".

Синтаксис

object-fit: fill | contain | cover | scale-down | none

Значения

fill – содержимое замещаемого элемента будет масштабировано без сохранения пропорций таким образом, чтобы полностью соответствовать размерам контейнера.
contain – содержимое замещаемого элемента будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера, при этом содержимое нигде не обрезается, но необязательно покрывает всю необходимую область своего контейнера.
cover – содержимое замещаемого элемента будет масштабировано с сохранением пропорций под размеры контейнера, при этом часть содержимого может быть обрезана в зависимости от ширины и высоты контейнера.
scale-down – для содержимого замещаемого элемента будет выбрано то из двух значений none и contain, которое предлагает меньшие размеры.
none – не изменяет исходный размер содержимого замещаемого элемента.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#propdef-object-fit

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>

		img{
		width: 450px;
		height: 150px;
		margin: 1em;
		border: dashed green 10px;
		}

		.object_fit_1{
		object-fit: fill;
		}
			

		.object_fit_2{
		object-fit: contain;
		}
		
		.object_fit_3{
		object-fit: cover;
		}
		
		.object_fit_4{
		object-fit: none;
		}
		
		.object_fit_5{
		object-fit: scale-down;
		}
				
	</style>
	
</head>
<body>

	<img src="balls_2015.jpg" class="object_fit_1">
	
	<img src="balls_2015.jpg" class="object_fit_2">
	
	<img src="balls_2015.jpg" class="object_fit_3">
	
	<img src="balls_2015.jpg" class="object_fit_4">	
	
	<img src="balls_2015.jpg" class="object_fit_5">
	
</body>
</html>

Пример №1