CSS - object-position Property

Quiz

CSS object-position property is used to specify the position of the content inside an element that has a defined size. It is commonly used with images or videos, allowing you to control where the focal point of the object should appear within its container.

Syntax

object-position: top | right | bottom | left | center | length | percentage | initial | inherit;

Property Values

Value	Description
top right bottom left center	keywords are used to set the position of the image. A combination of these values can be used.
length	The position of the element is set using length units (e.g. px, em, rem etc.) from the left and top edges respectively.
percentage	The position of the element is set using percentage values (e.g. 10%) relative to the size of the containing element, from the left and top edges respectively.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Object Position Property

The following examples explain the object-position property with different values.

Object Position Property with Keyword Values

The position of a replaced element (image or video) within the containing element can be set using keywords: top, right, bottom, left and center. These values can be used in combination. Depending on the values specified, the image will be positioned from the left edge and top edge respectively within the alloted space. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 300px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: left bottom;
      }

      .ex2 {
         object-position: right top;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: left bottom
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: right top
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

Object Position Property with Length Values

The position of a replaced element (image or video) within the containing element can be set using length units (e.g. px, em, rem etc.). The element is positioned from the left edge and top edge respectively within the alloted space. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 350px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: 5px 20px;
      }

      .ex2 {
         object-position: 2em 1em;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: 5px 20px ( 5px from 
      left edge and 20px from top edge)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: 2em 1em ( 2em from left 
      edge and 1em from top edge)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

Object Position Property with Percentage Values

The position of a replaced element (image or video) within the containing element can be set using percentage values (e.g. 10%). The element is positioned from the left edge and top edge relative to the size of the containing element respectively within the alloted space. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 350px;
         width: 500px;
         object-fit: none;
      }

      .ex1 {
         object-position: 20% 85%;
      }

      .ex2 {
         object-position: 85% 95%;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: 20% 85% ( 20% from the left edge, 
      85% from the top edge realtive to the size of 
      the containing element)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex1" />
   <h4>
      object-fit: 85% 95% ( 85% from the left edge, 
      95% from the top edge realtive to the size of 
      the containing element)
   </h4>
   <img src="/css/images/scenery4.jpg" 
   alt="img" class="ex2" />
</body>

</html>

Supported Browsers

Property
object-position	32.0	79.0	36.0	10.0	19.0

css_reference.htm

Print Page