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-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;">