对象的合

对象配合属性将定义了一个元素将如何装配到盒与已建立的高度和宽度。通常应用于图像或视频,Object-fit 接受以下五个值:

object-fit:fill;

StackOverflow 文档

填充会拉伸图像以适合内容框,而不考虑图像的原始宽高比。

包含

object-fit:contain;

StackOverflow 文档

包含适合框中高度或宽度的图像,同时保持图像的纵横比。

覆盖

object-fit:cover;

StackOverflow 文档

封面用图像填充整个框。保留图像宽高比,但将图像裁剪为框的尺寸。

没有

object-fit:none;

StackOverflow 文档

无忽略框的大小,不调整大小。

缩小

object-fit:scale-down;

按比例缩小可以将对象调整为 nonecontain。它会显示较小的图像尺寸。 StackOverflow 文档