CSS object-position

Introduction

CSS object-position, is the most important functions that define the site’s appearance. This particular CSS property is one of those minor properties that CSS developers do not ever seem to pay attention to; nevertheless, it can turn out to be uniquely helpful in working with replaced elements such as images and videos. This particular article seeks to provide detailed information on the object-position property focusing on what it is and how it can be utilized in order to improve the overall web designing.

What is object-position?

The object-position CSS property defines the positioning of the content inside a box of a replaced element which is the offset of the content box from the element box. This property is useful to read whenever images, videos, <object> and any other media contents are embedded in a web page. If an image or a video is bigger than the container, or has a different ratio, object-position defines which part of the content is shown in the container.

Syntax

The syntax for object-position is straightforward:

object-position: x y;

Here, x and y represent the horizontal and vertical positions, respectively. These values can be specified in various units, including percentages, pixels, or keywords.

Values

• Keywords: top, right, bottom, left, center
• Percentages: Any percentage value from 0% to 100%
• Length units: Pixels (px), ems (em), rems (rem), etc.

How object-position Works

To understand how object-position works, consider an image that is larger than its container. By default, the image will be centered within the container. However, with object-position, you can shift the image to display a different part of it.

Example

<div class="image-container">
    <img src="example.jpg" alt="Example Image">
</div>

.image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

img {
    width: 500px;
    height: auto;
    object-fit: cover;
    object-position: 50% 50%; /* Default: center */
}

In this example, the image is centered within its container. But what if you want to focus on the top-left corner of the image instead?

img {
    width: 500px;
    height: auto;
    object-fit: cover;
    object-position: 0% 0%; /* Top-left corner */
}

By setting object-position: 0% 0%;, the top-left corner of the image is displayed within the container.

Use Cases

1. Art Direction: In an image scenario where the subject of interest is a脸 portion of an image for instance a person’s face in a portrait then object-position means will assist determine the position of this area within the container.
2. Responsive Design: In responsive web design, images often need to adapt to different container sizes and aspect ratios. object-position allows you to control which part of the image is visible, ensuring a better visual experience across devices.
3. Background-like Images: For images that act like background images but need to remain accessible and SEO-friendly, object-position can replicate background positioning behavior.

Combining with object-fit

object-position is often used in conjunction with the object-fit property, which specifies how an image or video should be resized to fit its container. The common values for object-fit include:

• fill
• contain
• cover
• none
• scale-down

For example, when using object-fit: cover;, the content will be resized to cover the entire container, and object-position will determine which part of the content remains visible.

img {
    width: 500px;
    height: auto;
    object-fit: cover;
    object-position: 75% 25%;
}

In this case, the image scales to cover the container, shifting the focus to a point 75% from the left and 25% from the top.

Browser Support

The object-position property is highly compatible with all latest versions of all modern browsers such as Chrome, Firefox, Safari, Edge, etc. Make sure to check specific version support if you plan to accommodate older browsers.

Conclusion

The CSS object-position property effectively positions elements, especially images and videos, within their containers. Incorporating object-position means that the important parts of the media content are always easily visible and possess an appealing appearance. If you’re working on art-directed layouts, or designing for mobile or if you just generally want to produce clean, professional supply and demand of CSS and object-position is a useful addition to your tool shelf.

Frequently Asked Questions