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

					
Copy to clipboard
<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>

Copy to clipboard
<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>

Copy to clipboard
<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>

Copy to clipboard
<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

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

					
Copy to clipboard
<img src=".../path/your-image.svg" class="object-none object-right-top" style="height: 96px; width: 96px;">