How to Position Image When Scaling With CSS "object-fit: cover"?

When you use object-fit: cover on an image, the image is scaled to cover the entire container while maintaining its aspect ratio. By default, the image is centered vertically and horizontally within the container of the element. However, you can change the position of the image within the container by using the object-position property.

For example:

<div class="container">
  <img src="https://static.designcise.com/img/examples/plumeria.jpg" />
</div>

.container {
  width: 400px;
  height: 100px;
}

.container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom left;
}

In the example above, the container has a fixed width and height, and the image is set to fill the container using object-fit: cover. The object-position property is set to bottom left, which positions the image to the bottom-left within the container.

You can use any of the following object-position values to position the image differently within the container:

• Keyword values — you can use single or double keywords from "top", "bottom", "left", "right", and "center" to position the content horizontally and/or vertically;
• Percentage values — you can define the position of the content as a percentage of the content box size;
• Length values — you can use positive or negative length values in pixels, percentages, ems, or other length units, to define the position of the content from the top and left edges of the content box;
• Edge offset values — by default length values are positioned from the top-left edges of the content box, however, you can change that by specifying an edge offset followed by a value;
• Global values — inherit, initial, and unset can be used to inherit, set to the initial value, or unset the object-position property, respectively.

For example:

/* Single Keyword Value */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* Double Keyword Values */
object-position: top right;
object-position: bottom left;
object-position: center center;
/* ... */

/* Percentage Values */
object-position: 25% 75%; /* left = 25%, top = 75% */
object-position: 50% 50%; /* default */
/* ... */

/* Length Values */
object-position: 0 0;
object-position: 25px 8em; /* left = 25px, top = 8em */
/* ... */

/* Edge Offset Values */
object-position: bottom 10px right 20px; /* bottom = 10px, right = 20px */
object-position: right 3em bottom 10px; /* bottom = 10px, right = 3em */
object-position: top 0 right 10px; /* top = 0, right = 10px */
/* ... */

/* Global Values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;