object-position

The object-position property specifies the position of an image inside its containing element. It allows you to control where the image is placed relative to the element’s boundaries.

Syntax

object-position: position;

Values

• Keyword values:
  • top left: Places the image in the top-left corner of the container.
  • top center: Centers the image horizontally at the top of the container.
  • top right: Places the image in the top-right corner of the container.
  • center left: Centers the image vertically on the left side of the container.
  • center center: Centers the image both horizontally and vertically.
  • center right: Centers the image vertically on the right side of the container.
  • bottom left: Places the image in the bottom-left corner of the container.
  • bottom center: Centers the image horizontally at the bottom of the container.
  • bottom right: Places the image in the bottom-right corner of the container.
• Percentage values:
  • Specify the position relative to the container’s boundaries. For example, 50% 50% would center the image.
• Coordinate values:
  • Specify the exact position in pixels relative to the top-left corner of the container. For example, 100px 200px would place the image 100 pixels from the left and 200 pixels from the top.

Example

<img src="image.jpg" alt="My Image">

img {
  width: 200px;
  height: 100px;
  object-position: center bottom;
}

In this example, the image will be centered horizontally and placed at the bottom of its container.

Additional Notes

• The object-position property is supported by most modern browsers.
• It works with various image types, including img, svg, and background images.
• You can combine object-position with other CSS properties like object-fit to control the image’s sizing and placement.