When we introduce an image to the page, we can place an img element: , and specify its size with CSS:

img {
    width: 100px;
    height: 100px;
}
Copy the code

If the actual image size is the same as the size of the element, no additional operations are required. But if the actual image size is different from the size of the element, then we need to use CSS to control how the image is displayed in the IMG element.

object-fit

The main purpose of object-Fit is to control how images are displayed in the IMG element. It has five values:

  • Fill: Shrink or enlarge the image to the same size as the IMG element, regardless of the scale of the image.
  • Cover: Keep the image in proportion to fill the entire IMG element
  • Contain: Keep the proportion of the image so that the IMG element contains the whole image
  • None: Displays the image in its original size, cropped if it exceeds the size of the IMG element
  • Scale-down: From the ‘none’ or ‘contain’ property, select the property that has a small area to contain

Example 1: img element size =100×100, image size =100×100, object-positon: top left;

The image size is the same as the img element size, and different values behave the same.

Example 2: img element size =100×100, image size =300×100, object-positon: top left;

When the image is wider than the img element:

  • Fill: The image is compressed to 100×100, regardless of the original scale
  • Cover: The original size of the image is just enough to fill the IMG element. No need to zoom in or out. The upper left area is displayed according to the Object-position property
  • Contain: Contains an image that is larger than the width of the IMG element. Scale the image until it is the same as the img element
  • None: The image is displayed in its original size. The upper left area is displayed according to the Object-position property
  • Scale-down: Select the ‘contain’ attribute, because the ‘contain’ attribute actually contains a small area

Example 3: img element size =100×100, image size =100×300, object-positon: top left;

The image is higher than the img element when:

  • Fill: The image is compressed to 100×100, regardless of the original scale
  • Cover: The original size of the image is just enough to fill the IMG element. No need to zoom in or out. The upper left area is displayed according to the Object-position property
  • Contain: The image has a width ratio smaller than that of the IMG element. Scale the image until it is the same as the img element
  • None: The image is displayed in its original size. The upper left area is displayed according to the Object-position property
  • Scale-down: Select the ‘contain’ attribute, because the ‘contain’ attribute actually contains a small area

Example 4: img element size =100×100, image size =50×80, object-positon: top left;

The image is smaller than the img element.

  • Fill: The picture is enlarged to 100×100 without considering the original scale
  • Cover: Keep the image scale and enlarge the image until the entire IMG element is covered
  • Contain: Keep the image scale and enlarge it until the IMG element contains the entire image
  • None: The image is displayed in its original size. The specific area is displayed according to the Object-position property
  • Scale-down: Select the ‘None’ property, because the ‘None’ property has a smaller actual display area