CSS object-position Property

CSS's object-position property specifies how an image or video element with x/y coordinates is positioned within its content box.

Syntax

object-position: position | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        width: 100px;
        height: 150px;
        object-fit: cover;
        object-position: 10px 15px;
        border: 2px solid #ff4842;
    }
</style>
</head>
<body>

<h2>object-position: 10px 15px</h2>
<img class="ex1" src="https://webtutor.dev/images/computer.jpg" alt="Computer">

<p>Original image:</p>
<img src="https://webtutor.dev/images/computer.jpg" alt="Computer">

</body>
</html>

Preview

Property Values

Value	Description
position	Sets the position of the image or video within the content box. The first value governs the x-axis, while the second governs the y-axis. It could be a string or it could be a number. Negative values are permitted.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
object-position	31.0	36.0	10.0	16.0	19.0

object-fit

opacity

CSS object-position Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us