How to Use CSS object-fit and object-position

Core points

• CSS properties object-fit and object-position can be used to resize and position the embedded images and other replacement elements, similar to the CSS properties background-size and background-position for background images.
The
• object-fit attribute provides a variety of options to control how the image is displayed in a specified area, and can hide some of the image if necessary. This is useful for adapting images to a specific space without distortion.
The
• object-fit attribute has five main keyword values: cover, contain, none, scale-down, fill and
. These values ​​determine how the image is displayed within its container, may be to cover areas, adapt to areas, maintain natural size, reduce to fit or fill content boxes.
• object-position50% 50% Attribute controls the position of an image element within its content box. Its default value is
, which aligns the image center with the content box center, but can be adjusted using a series of keyword values ​​or length values.
• object-fitWhile object-position and
are designed to handle any type of replacement elements, they are most commonly used to adapt images to specific spaces without distortion. They are supported in all modern browsers, but not in Internet Explorer.

background-sizeCSS provides the background-position and object-fit properties to resize and position the background image. The object-position and object-fit properties allow us to perform similar operations on embedded images (and other replacement elements, such as videos). This article will dive into how to fit an image to a specific space using object-position and how to use

to accurately control the position of an image in that space.

Uses of object-fit

Sometimes, the image can be too large to fit the space we want. In the past, we had to crop images in an image editor, or resize images by setting width and/or height constraints (this is not the perfect choice), or perform some kind of complex cropping, or maybe resort to using background images (if Images are not just for decoration, which is a pity).

The function of the attribute on an image is similar to that of object-fit on a background image: It provides a variety of options to control how the image is displayed in a specified area, and can hide some of the contents of the image if necessary. This specified area may have a fixed width and height, or it may be a more responsive space, such as a mesh area, which grows, shrinks, and bends according to the size of the browser viewport. background-size How to work

Each HTML element has its own "content box" which represents the space occupied by the element. By default, the content box of the image matches its natural size.

When we apply different widths and/or heights to the image, we are actually changing the size of the content box. If the size of the content box changes, the image will still fill the content box. So if we have an image of 300px x 300px and set its size to 300px x 200px, the image will appear deformed.

The

object-fit property provides a variety of options for us to display images in the resized content box. We can hide part of the image, or force the image to only partially fill its content box so that the image is completely visible and does not deform.

Settings

To illustrate in detail how the object-fit properties work, we place an image in a div centered using a grid layout. The div has a brown background and a dotted border is provided by a ::before pseudo-element, which will help us understand what changes have happened to the image.

View an example of SitePoint (@SitePoint) on CodePen: object-fit: setup

For our image demonstration we will use the following image (Oia, Santorini, Greece). Its natural dimensions are 400px x 600px.

Our image is much larger than our div and if we place the image inside the div it will overflow as shown below.

View an example of SitePoint (@SitePoint) on CodePen: object-fit: setup2

Our goal is to prevent the image from overflowing its container like this while making it comfortable to fit the container, and object-fit will help us achieve this.

If we are using a background image, we can set something similar to background-size: cover, and the background image will be confined to the area of ​​the container. However, as we can see, in order for object-fit to work, we first need to define the width and height of the image content box so that it is different from the natural dimensions. In the following example, we limit the width and height of the image to 100% so that its content box matches the size of the container div:

img {
  width: 100%;
  height: 100%;
}

This is what it looks like.

View an example of SitePoint (@SitePoint) on CodePen: object-fit: setup3

The image and its content boxes now fit perfectly with the container, but the image is severely deformed. This is where the magic of object-fit comes into play, let's see what it can offer.

Using object-fitAdap Images to container

The

object-fit attribute provides five main keyword values ​​to determine how an image is displayed within its container. Two of the keywords—cover and contain— perform the same function as their background-size counterparts.

object-fit: cover

cover Value forces the image to completely cover the container area, displaying as many images as possible without distortion:

img {
  width: 100%;
  height: 100%;
}

View an example of SitePoint (@SitePoint) on CodePen: object-fit: cover

Because the image is very high, we see its full width, but we can't see its full height, as shown in the following image.

cover Values ​​are probably the most practical value provided and are preferred in most cases.

What is worth noting here is the location of the image. Unlike background-position (default is 0 0, which locates the background image from the upper left corner of the container), the default object-position is 50% 50%, which centers the image in its content box. When we look at the object-position property later, we will learn how to specify which part of the image is visible.

object-fit: contain

contain Value forces the image to fully adapt to its content box, but not distorted. The image retains its natural aspect ratio so it does not fill its container:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

View an example of SitePoint (@SitePoint) on CodePen: object-fit: contains

It looks like we can get the same result as above by simply setting height: 100% on the image. But that's not the case, because that will position the image to the left instead of centering, which is the default setting for object-fit. Combined with object-position, object-fit, there are more options for how images are positioned in containers.

object-fit: none

none Properties allow the image to remain in its natural, original size. Only partial images that can adapt to the resized content box are visible.

View an example of SitePoint (@SitePoint) on CodePen: object-fit: none

Unlike object-fit: cover, our images are not forced to be fully visible along at least one axis. The original image is wider and taller than the content box, so it overflows in both directions, as shown in the following image.

Note again that the center of the image is aligned with the center of the content box by default.

Also note that object-fit: none does not mean object-fit did nothing. As we've seen, it does a lot of things compared to not having the object-fit set at all. (As a reminder, please check the situation after deleting object-fit: none in the example above.)

object-fit: scale-down

The attributes are either the same as

or the same as scale-down. It selects none to cause the image to display smaller results. contain View an example of SitePoint (@SitePoint) on CodePen: object-fit: scale-down

Obviously, in our current example, it will select because our container

is smaller than

image. If our container contain is larger than image, then will dominate and the image will maintain its natural size instead of filling the container in one direction, which you can see in this CodePen demo. none

If we change the object-fit: fill value to

in the demo, it's like there is no setting

. This is because, by default, the image fills its content box no matter what size is set. object-fit fillView an example of SitePoint (@SitePoint) on CodePen: object-fitobject-fit: fill

Because the property may deform the image, it may not be the best choice in most cases.

fillUse without container

In the example above, we have been using object-fit to resize the image in the div container, but the principle we have seen in practice works just as well without that container. What matters is the size of the image content box and how the image is displayed in its content box.

For example, we can apply the following CSS to the image without any surrounding div:

object-fit

The results are shown in the CodePen demonstration below.

View an example of SitePoint (@SitePoint) on CodePen:

img {
  width: 100%;
  height: 100%;
}

object-fit: no container

Try changing the values ​​on the attribute to overwrite, fill, shrink, and none in the example above to see the behavior of each value. The result is the same as the result of the image set to 100% width and height and included in the div set to 300px x 300px.

Used in responsive layout object-fit

object-fit Properties may be most useful when the size of the specified area of ​​the image is responding to the browser viewport size. The following demonstration assigns our images to a specific, flexible grid area:

View an example of SitePoint (@SitePoint) on CodePen: object-fitobject-fit in a responsive area

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

As the viewport and grid area expand and shrink, the cover value ensures that the image always adapts perfectly to its grid area, changing the visible part of the image so that it never distorts. (View the demo in full page view for best results.)

To learn more about grid areas, check out our CSS grid preparation guide.

Use object-position Set image position

Just as using background-position to set the position of the background image in its container, the object-position attribute controls the position of the image elements within its content box.

As we can see, the default value of object-position is 50% 50%, which means that the image center is aligned with the content box center on the horizontal and vertical axes. We can change it using a series of keyword values ​​(top, bottom, left, right, center) or using length values ​​(such as px, em, or %) or both.

Suppose we now want to position our image from the bottom right corner. We can use the keyword right bottom or percentage value 100% 100%:

img {
  width: 100%;
  height: 100%;
}

View examples of SitePoint (@SitePoint) on CodePen: object-position 1: keywords

The following image illustrates the current location of our image.

You can use targeting keywords in the example above to see how they work, as well as the object-fit keywords, but the results should be easy to predict.

We can also offset the image from its container using units such as pixels or em. For example:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

View an example of SitePoint (@SitePoint) on CodePen: object-position 2: units

We can make similar offsets from the bottom right corner by combining units and keywords, as shown below:

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

View an example of SitePoint (@SitePoint) on CodePen: object-position 3: units and keywords

We have seen that we can use percentages to locate images in the content box. As with the background-position attribute, using percentages with object-position can be a bit confusing. object-position's 50% 50% means that the center of the image is aligned with the center of the content box on the horizontal and vertical axes.

If we set object-position to 20% 40%, it means that a vertical line at 20% of the left side of the image coincides with a vertical line at 20% of the left side of the content box, and a horizontal line at 40% of the top of the image Coinciding with a horizontal line at 40% of the top of the content box, as shown in the figure below.

We can see this in the CodePen demo below.

View examples of SitePoint (@SitePoint) on CodePen: object-position 4: percentages

Conclusion

object-fit Attributes are intended to be used with any type of replacement elements, such as images, videos, iframes, and embedded objects. How useful it is to adapt elements like videos to defined areas where some elements may be hidden is probably a question to be discussed, but there is no doubt that there are viable use cases. A better option might be to set the width of the iframe to the width: 100% of the free space and then use the aspect-ratio property to maintain its proportion.

More common situations are the need to adapt the image to a specific space, so object-fit is very useful for allowing the image to adapt to the space without distortion (even if part of the image must be hidden).

To learn more about object-fit and object-position, check out the MDN page for these properties:

• [object-fit](The link needs to be replaced with MDN object-fit link)
• [object-position](The link needs to be replaced with the MDN object-position link)

Finally, as mentioned above, it is worth comparing the object-fit and object-position properties with the background-size and background-position properties, which have many similarities. See how to use CSS background-size and background-position to learn about them.

FAQs (FAQs) about CSS object-fitobject-position and Properties

What is the difference between object-fitobject-position and

in CSS?

The object-fit and object-position properties in the object-fitCSS are used to control the content of the replacement element, such as an image or video. background-size attribute defines how an element responds to its content box height and width. It's similar to fill in CSS, but works with replacement elements. It has five values: contain, cover, none, scale-down,

, and

. object-position background-positionOn the other hand, the

attribute determines where the replacement element is within its box. It's similar to

, but works with replacement elements. It takes two values ​​to represent the x and y coordinates, which set the position of the element. object-fit

How to use

attribute to resize image? object-fit

img {
  width: 100%;
  height: 100%;
}

Properties can be used to control how the image should be resized to fit its container. Here is an example:

<🎜> In this example, the image will be resized to cover the entire width and height of its container while maintaining its aspect ratio. If the aspect ratio of the image does not match the aspect ratio of the container, the image will be cropped. <🎜>

Can I use object-position with background image?

No, object-position Attributes cannot be used with background images. It only works with replacement elements such as img, video or embed. For background images, you can use the background-position attribute instead.

How does the

object-fit's contain value work?

The

object-fit value of the contain property resizes the content to fit the content box while maintaining its aspect ratio. If its aspect ratio does not match the aspect ratio of the content, the entire content will be visible, but there may still be some space in the content box.

What is the function of the

object-fit value? none The

value of the object-fit attribute means that the content will ignore the height and width of the content box. It will retain its original size, which may cause the content to be cropped if it is larger than the content box. none

How to use

Center image? object-position

You can use the

property to center the image in its content box. Here is an example: object-position

img {
  width: 100%;
  height: 100%;
}

In this example, the image will be located in the center of its content box.

Can I use percentage values ​​in

? object-position

Yes, you can use percentage values ​​in the

attribute. These values ​​indicate the location of the content relative to the content box. For example, object-position locates content in the upper left corner of the content box, while 0% 0% locates it in the lower right corner. 100% 100%

What happens if I don't specify the

value? object-position

If you do not specify the

value, the default value is object-position, which will center the content within its content box. 50% 50%

Can I use

and object-fit at the same time? object-position

Yes, you can use the

and object-fit properties to control the size and position of the content. Here is an example: object-position

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

In this example, the image will be resized to overwrite its content box and center it.

All browsers support the

and object-fit properties? object-position

All modern browsers, including Chrome, Firefox, Safari, and Edge, support the

and object-fit properties widely. However, Internet Explorer does not support them. object-position

The CodePen links in all code examples need to be replaced with the actual link. Please note that this article has been greatly rewritten and polished to meet the requirements of pseudo-originality, while retaining all information and pictures of the original text.

The above is the detailed content of How to Use CSS object-fit and object-position. For more information, please follow other related articles on the PHP Chinese website!