Object fit Property in CSS

The Object fit property css is used to enumerate how an <img> tag or <video> tag should be resize to fit in container. You can change the adjustment of the replaced component's content object within the element's box using the object-position property.

The object-fit property have the following info :

fill - This value is default. The object will be stretched or squished to fit.
contain - The replaced content is scaled to maintain its aspect ratio.
cover - The replaced content is sized to maintain its aspect ratio. The object will be clipped to fit
none - The replaced content is not resized
scale-down - The content is sized as if none or contain were specified.

Below are the format of style property and its value in perticular class.

<style>
  .fill {object-fit: fill;}
  .contain {object-fit: contain;}
  .cover {object-fit: cover;}
  .scale-down {object-fit: scale-down;}
  .none {object-fit: none;}
</style>