CSS object-position Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 29 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The object-position property in CSS is used to specify the alignment of the content within a replaced element, such as an image or a video.

This property is particularly useful when the content is larger than the element's box and gets cropped. By adjusting the position, you can control which part of the content is visible within the element.

💡 Syntax

The syntax for the object-position property is straightforward. It allows you to specify the position of the content within the element using various units and keywords.

Syntax

Copied

element {
  object-position: value;
}

🎛️ Default Value

The default value of the object-position property is 50% 50%, which centers the content within the element.

🏠 Property Values

The object-position property accepts various values to define the position:

Value	Description
Keywords	top, bottom, left, right, center.
Percentage	Specifies the position as a percentage relative to the element's box.
Length	Specifies the position using length units like px, em, etc.

The values can be combined to set both horizontal and vertical positions, e.g., object-position: top right;.

📄 Example

In this example, we'll use the object-position property to focus on the bottom-right part of an image that overflows its container.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS object-position Example</title>
  <style>
    .container {
      width: 200px;
      height: 200px;
      overflow: hidden;
    }
    .container img {
      width: 400px;
      height: auto;
      object-position: bottom right;
    }
  </style>
</head>
<body>
  <h1>Image with Custom Object Position</h1>
  <div class="container">
    <img src="example.jpg" alt="Example Image">
  </div>
</body>
</html>

In this example, the image example.jpg is larger than the container, and by setting object-position: bottom right;, we focus on the bottom-right part of the image.

🖥️ Browser Compatibility

The object-position property is widely supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it's good practice to verify compatibility and test across different browsers to ensure consistent rendering.

🎉 Conclusion

The object-position property is a useful tool for controlling the alignment of content within replaced elements. It allows you to ensure that the most important part of the content is visible, even when the element's size doesn't match the content's dimensions. Experimenting with different values can help you achieve the desired visual effect on your website.