Object Fit - Tailwind CSS

Trang chủ » Html Css Stretch Image To Fit Div » Object Fit - Tailwind CSS

Có thể bạn quan tâm

ClassStyles
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

Examples

Resizing to cover

Use the object-cover utility to resize an element's content to cover its container:

<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />

Containing within

Use the object-contain utility to resize an element's content to stay contained within its container:

<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />

Stretching to fit

Use the object-fill utility to stretch an element's content to fit its container:

<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />

Scaling down

Use the object-scale-down utility to display an element's content at its original size but scale it down to fit its container if necessary:

<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />

Using the original size

Use the object-none utility to display an element's content at its original size ignoring the container size:

<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />

Responsive design

Prefix an object-fit utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<img class="object-contain md:object-cover" src="/img/mountains.jpg" />

Learn more about using variants in the variants documentation.

Từ khóa » Html Css Stretch Image To Fit Div