媒體與 SVG

物件適應object-fit

Setting how the content should be resized to fit its container.

Examples

Use object-cover when media should fill its frame while preserving its aspect ratio.

<img class="w:full aspect-ratio:16/9 object-cover" src="/images/cover.jpg" alt="Cover">

Generated CSS

@layer utilities {    .object-cover {        object-fit: cover    }}

Use object-contain when the full image or video must remain visible inside the frame.

<img class="w:full aspect-ratio:1/1 object-contain" src="/images/logo.png" alt="Logo">

Use object-fit:none when the media should render at its intrinsic size within the content box.

<img class="object-fit:none" src="/images/icon.png" alt="Icon">

Apply styles based on different states using selectors and conditional queries.

<img class="object-cover:hover object-contain@sm object-fit:none@print" src="/images/photo.jpg" alt="">

Setting the color of an SVG shape.

Setting the alignment of the selected replaced element within the element's box.