媒體與 SVG

物件位置object-position

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

Examples

Use object-center to keep the center of an image visible when object-cover crops the edges.

<img class="aspect-ratio:16/9 object-cover object-center" src="/images/photo.jpg" alt="Photo">

Generated CSS

@layer utilities {    .object-center {        object-position: center    }}

Use object-top for portraits or screenshots where the important content is near the top.

<img class="aspect-ratio:4/3 object-cover object-top" src="/images/portrait.jpg" alt="Portrait">

Use object-position:*|* when the focal point needs a custom x and y position.

<img class="object-cover object-position:50%|25%" src="/images/scene.jpg" alt="Scene">

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

<img class="object-center:hover object-top@sm object-position:50%|50%@print" src="/images/photo.jpg" alt="">

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

Setting the outline color of an SVG shape.