object-fit | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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 – не изменяет исходный размер содержимого замещаемого элемента.

Ссылки

Примеры

HTML Результат BwCodes
<!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