Object Fit

Control how replaced elements like <img> and <video> are resized within their container.

Object Fit

<img class="velin-object-fit-contain" src="..." alt="...">
<img class="velin-object-fit-cover" src="..." alt="...">
<img class="velin-object-fit-fill" src="..." alt="...">
<img class="velin-object-fit-scale-down" src="..." alt="...">
<img class="velin-object-fit-none" src="..." alt="...">

Object Position

Set the alignment of the element's content within its box:

<img class="velin-object-fit-cover velin-object-position-top" src="..." alt="...">
<img class="velin-object-fit-cover velin-object-position-center" src="..." alt="...">
<img class="velin-object-fit-cover velin-object-position-bottom" src="..." alt="...">

Responsive

All object-fit utilities support responsive breakpoints:

<img class="velin-object-fit-contain velin-object-fit-md-cover" src="..." alt="...">