We know that images play a crucial role on a web page. It helps to show the content effectively and clearly. Sometimes, the content image may have a size that is either bigger or smaller than the container it is intended to be displayed in, or its aspect ratio may be different from that of the container. We will consider how to show an image in the best manner.

object-fit

object-fit specifies how an image should be resized to fit its container.

object-fit: fill | contain | cover | none | scale-down;

• fill: stretches the image to fill the container, ignoring aspect ratio (can distort).;
• contain: scales the image to fit inside the container while keeping aspect ratio (may leave empty space);
• cover: fills the container completely while keeping aspect ratio (may crop);
• none: uses the image's original size; it can overflow the container;
• scale-down: uses the smaller of none or contain (either original size or scaled down to fit).

object-position

object-position specifies the position of the image inside its container. It accepts two values: a horizontal value and a vertical value or we can use reserved words.

object-position: x y;