CSS `object-position` Property

The `object-position` property defines the alignment of the content within its container when the `object-fit` property is set to something other than `fill`. This property is especially useful for adjusting the position of images, videos, or other elements when they do not completely fill the container.

Common Values for `object-position`

• `center`: Aligns the content to the center of the container. This is the default value.
• `top`: Aligns the content to the top of the container.
• `bottom`: Aligns the content to the bottom of the container.
• `left`: Aligns the content to the left side of the container.
• `right`: Aligns the content to the right side of the container.
• Custom values: You can use percentage or length values (e.g., `50% 50%` or `10px 20px`) to precisely position the content within the container.

Examples of `object-position` Values

/* Object Position Center Example */
.object-position-center {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 300px;
}

            

/* Object Position Top Left Example */
.object-position-top-left {
    object-position: top left;
    object-fit: cover;
    width: 100%;
    height: 300px;
}

            

/* Object Position Bottom Right Example */
.object-position-bottom-right {
    object-position: bottom right;
    object-fit: cover;
    width: 100%;
    height: 300px;
}

            

/* Object Position Custom Value Example */
.object-position-custom {
    object-position: 10% 20%;
    object-fit: cover;
    width: 100%;
    height: 300px;
}

            

Explanation of CSS Properties

- `object-position: center;`: Centers the content within the container.
- `object-position: top left;`: Aligns the content to the top-left corner of the container.
- `object-position: bottom right;`: Aligns the content to the bottom-right corner of the container.
- `object-position: 10% 20%;`: Aligns the content 10% from the left and 20% from the top of the container, allowing for precise positioning.