Cropping Images in CSS With Object-Fit

Ever wanted an image to fit exactly to a certain size, but still maintain its aspect ratio and avoid getting squashed? For a long time, this was hard to do with CSS. But now the object-fit property can solve this problem!

In addition to inherit, initial, and unset, object-fit has five other possible values:

  • contain: Keep the original aspect ratio of the image and adjust the size of the image so that the height or width (the longer of the two) fits the given size.
  • cover: Keep the original aspect ratio of the image, and the image area is completely covered by the image.
  • fill: Default value. The image completely fills the image area, even at the cost of losing the original aspect ratio.
  • none: The image size will not be adjusted. The original image size is spread directly over the image area.
  • scale-downValue:contain,noneIn the case of the smaller one.

Here’s an image with its original dimensions: 1200px wide and 674px high. We set the display to half size, i.e. 600px by 337px.

If you don’t change the height, set the width to 300px. Then the original aspect ratio of the image is changed and the image appears to be squashed vertically:

Object-fit solves this problem. Let’s see.

object-fit: contain

As can be seen from the above picture, the whole picture is contained in the image area.

object-fit: none

Because the original size of the image is larger than the image area, only the middle portion of the original image is shown here.

object-fit: cover

The word “cover” means “cover”. Look at the final rendering effect of object-fit: Cover above: The height of the whole image is completely displayed, while the corresponding width (keeping the original aspect ratio) is not completely displayed, only the middle part is displayed. That is to say, the so-called cover effect is to ensure that the width of the picture, the height of the smaller side of the first complete presentation, the other side is cut.

object-fit: fill

object-fit: scale-down

Contain: contains (object fit: scale-down) contains (object fit: scale-down) contain (object fit: scale down) contain (contain)

Among these examples, object-fit: Cover is the most consistent with our expectations.

object-position

Now, assuming that the image has been cropped according to our Object-fit Settings, but the image is not displayed in the desired position, you can use the Object-position property to precisely control the image’s display area.

Let’s take object-fit: cover as an example:

.alligator-turtle {
  object-fit: cover;

  width: 300px;
  height: 337px;
}
Copy the code

Now we change the position of the visible part of the image on the X-axis so that we can see the far right of the image:

.alligator-turtle {
  object-fit: cover;
  object-position: 100% 0;

  width: 300px;
  height: 337px;
}
Copy the code

The default value of the object-position attribute is 50%, 50%, which is why the cropped image shown above is centered.

Finally, let’s see what happens if we provide an out-of-bounds value:

.alligator-turtle {
  object-fit: cover;
  object-position: -20% 0;

  width: 300px;
  height: 337px;
}
Copy the code

compatibility

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)