CSS object-fit property

Object-fit CSS property and value explination

contain: if you have set an explicit height and width on a replaced element, object-fit:contain; will cause the content (e.g. the image) to be resized so that it is fully displayed with the intrinsic aspect ratio preserved, but still fits inside the dimensions set for the element.

fill: causes the element's content to expand to completely fill the dimensions set for it, even if this does break its intrinsic aspect ratio.

cover: preserves the intrinsic aspect ratio of the element content, but alters the width and height so that the content completely covers the element. The smaller of the two is made to fit the element exactly, and the larger overflows the element.

none: the content completely ignores any height or weight set on the element, and just uses the replaced element's intrinsic dimensions.

Example Usage:

object-fit: contain;
object-position: top 75%;

img {
	width: 300px;
	height: 300px;
	-o-object-fit: contain;
}
 
 
img {
	height: 100px;
	width: 100px;
	object-fit: contain;
	object-position: top 75%;
}