Object fit and object position
Object fit
Helper classes for controlling how an object should be resized.
.object-contain
-object-fit: contain;
.object-cover
-object-fit: cover;
.object-fill
-object-fit: fill;
.object-none
-object-fit: none;
.object-scale-down
-object-fit: scale-down;
.object-contain
.object-cover
.object-fill
![object contain example](../assets/img/image_placeholder.png)
.object-none
.object-scale-down
Object position
Helper classes for controlling how an object should be positioned within its container.
.object-bottom
-object-position: bottom;
.object-center
-object-position: center;
.object-top
-object-position: top;
.object-left
-object-position: left;
.object-left-bottom
-object-position: left-bottom;
.object-left-top
-object-position: left-top;
.object-right
-object-position: right;
.object-right-bottom
-object-position: right-bottom;
.object-right-top
-object-position: right-top;
.object-bottom
.object-center
.object-top
.object-left
.object-left-bottom
.object-left-top
.object-right
.object-right-bottom
.object-right-top
<!-- Object fit -->
<div class="border overflow-hidden rounded bg-default mb-32">
<img src=".../path/your-image.svg" class="object-contain w-100" style="height: 50px;">
</div>
<div class="border overflow-hidden rounded bg-default mb-32">
<img src=".../path/your-image.png" class="object-fill w-100" style="height: 50px;">
</div>
<div class="border overflow-hidden rounded bg-default mb-32">
<img src=".../path/your-image.svg" class="object-none w-100" style="height: 50px;">
</div>
<div class="border overflow-hidden rounded bg-default mb-32">
<img src=".../path/your-image.svg" class="object-scale-down w-100" style="height: 50px;">
</div>
<!-- Object position -->
<img src=".../path/your-image.svg" class="object-none object-right-top" style="height: 96px; width: 96px;">