Style objectFit Property
Cut off the sides of an image, preserving the aspect ratio, and fill in the space:
document.getElementById("myImg").style.objectFit = "cover";
Try it Yourself »
The objectFit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible"
The numbers in the table specify the first browser version that fully supports the property.
Return the objectFit property:
Set the objectFit property:
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
|This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
|The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
|The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
|The replaced content is not resized
|The content is sized as if none or contain were specified (would result in a smaller concrete object size)
|Sets this property to its default value. Read about initial
|Inherits this property from its parent element. Read about inherit
|A String, representing the object-fit of an element
CSS tutorial: CSS object-fit
CSS reference: object-fit property