object-fit and object-position

Back to the index.

Two properties for objects, which mostly means images, but might also mean videos and anything else that’s embedded in a page.


The object-fit property determines how the object fits into its box. In this example the object is an image of 189x24 pixels which is forced inside box of 75x40 and 275x40 pixels.

<img src="/pix/logo_quirksmode.gif">

img {
	margin: 10px 0;
	width: 75px;
	height: 40px;
	border: 5px double;
	overflow: hidden;

img.two {
	width: 275px;
	height: 40px;

fill (default)

The default is fill, which tells the image to fill the entire box and ignore its own aspect-ratio. This is the effect we have known since time immemorial.


The contain value tells the image to shrink or enlarge itself until it fits in the box while maintaining its aspect-ratio.


The cover value tells the image to shrink or enlarge itself until it fills up the box completely while maintaining its aspect-ratio. This usually results in only part of the image being shown.


The none value tells the image to ignore the box and retain its own size. This may result in the image not filling up the box or sticking out of it.


The scale-down value tells the image to compare the results of none and contain and choose the one that results in the smallest image. In this test page that would be contain.


If an image does not coincide exactly with its box, it should be possible to position it somewhere; for instance in the lower right corner. All images below have object-fit: none and are positioned at various spots in the box.

bottom right

75% 25%