CSS object-position

An image or video element's x/y position inside of its content box is determined by the object-position attribute of CSS.

Let's imagine that the visible portion of the image is not placed where we would like it to be. We will be using the object-position property to position the image.

Position:

This describes where the element is located. It requires two integer values, one for the top of the content-box and the other for the distance from the left of the content-box. Negative values are also an option.

Syntax

object-position: position | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        width: 150px;
        height: 200px;
        object-fit: cover;
        object-position: 40% 60%;
    }
</style>
</head>
<body>

<h2>object-position: 40% 60%</h2>
<img class="ex1" src="https://webtutor.dev/images/computer.jpg" alt="Computer">

</body>
</html>

Preview

CSS object-fit

CSS Masking

CSS object-position

Position:

Syntax

Example

Links

Tutorials

Connect with us