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;

Example
HTML

.object-contain

.object-cover

.object-fill

.object-none

.object-scale-down

<div class="row">
	<div class="col-xl-9">
		<p class="mb-4"><code>.object-contain</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-contain w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-cover</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-cover w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-fill</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="../assets/docs/img/image_placeholder.png" class="object-fill w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-none</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-scale-down</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-scale-down w-100" alt="object contain example" style="height: 50px;">
		</div>
	</div>
</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;

Example
HTML

.object-bottom

.object-center

.object-top

.object-left

.object-left-bottom

.object-left-top

.object-right

.object-right-bottom

.object-right-top

<div class="row mb-48">
	<div class="col text-center">
		<p class="mb-4"><code>.object-bottom</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-center</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-center mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-top</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>

<div class="row mb-48">
	<div class="col text-center">
		<p class="mb-4"><code>.object-left</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-left mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-left-bottom</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-left-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-left-top</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-left-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>

<div class="row">
	<div class="col text-center">
		<p class="mb-4"><code>.object-right</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-right mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-right-bottom</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-right-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-right-top</code></p>
		<div class="overflow-hidden">
			<img src="../assets/docs/img/image_placeholder.svg" class="object-none border rounded bg-default object-right-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>