Home » CSS object-position

CSS object-position

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;
CSS

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>
HTML
.image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

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

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 */
}
CSS

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%;
}
CSS

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

1. What is the difference between object-position and background-position?

object-position is used for aligning the content of replaced elements such as images, videos, and <object> elements within their containers. It specifically deals with the positioning of the actual media content. On the other hand, background-position is used to position background images within an element. While both properties control the positioning of visual content, object-position is for the content itself, whereas background-position is for background images applied through CSS.

2. Can I use object-position with any type of element?

No, object-position is specifically designed for replaced elements, such as <img>, <video>, <embed>, <object>, and <iframe>. These are elements whose content is replaced by external resources, like images or videos. It doesn’t apply to standard block or inline elements such as <div>, <span>, or <p>.

3. How do object-fit and object-position work together?

With reference to object-fit and object-position, it’s clear that these properties determine how replaced elements render inside their containers. Object-fit sets how content should scale (e.g., cover, contain, fill), while object-position indicates which part of the content appears in the container. For example, setting object-fit: cover; and object-position: top right; resizes the image or video to cover the container, focusing the visible portion on the top right. These two aspects allow enhancement of the fine control over the aesthetic appeal and positioning of media content.