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
, andunset
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;
Hope you found this post useful. It was published . Please show your love and support by sharing this post.