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 contain example

.object-cover

object contain example

.object-fill

object contain example

.object-none

object contain example

.object-scale-down

object contain example

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 contain example

.object-center

object contain example

.object-top

object contain example

.object-left

object contain example

.object-left-bottom

object contain example

.object-left-top

object contain example

.object-right

object contain example

.object-right-bottom

object contain example

.object-right-top

object contain example
				
<!-- 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;">