object-position
En esta página
"Utilities for controlling how a replaced element's content should be positioned within its container.";
| Clase | Propiedades CSS |
|---|---|
object-top-left |
object-position: top left; |
object-top |
object-position: top; |
object-top-right |
object-position: top right; |
object-left |
object-position: left; |
object-center |
object-position: center; |
object-right |
object-position: right; |
object-bottom-left |
object-position: bottom left; |
object-bottom |
object-position: bottom; |
object-bottom-right |
object-position: bottom right; |
object-(<custom-property>) |
object-position: var(<custom-property>); |
object-[<value>] |
object-position: <value>; |
Examples#
Basic example#
Use utilities like object-left and object-bottom-right to specify how a replaced element's content should be positioned within its container:
{
object-top-left
object-top
object-top-right
object-left
object-center
object-right
object-bottom-left
object-bottom
object-bottom-right
<!-- [!code classes:object-top-left,object-top-right,object-center,object-bottom-left,object-bottom-right,object-bottom,object-left,object-right,object-top] -->
<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />