CSS - object-fit 属性

CSS 中的 object-fit 属性用于指定应如何调整图像或视频的大小或裁剪以适应其容器。

可能的值

该属性采用单个值，即关键字，如下所示：

contain：缩放图像/视频以适合容器，同时保持其纵横比。它可能会在容器内留下空白空间。
cover：缩放图像/视频以覆盖整个容器，同时保持其纵横比。这可能会导致图像/视频的某些部分被剪裁。
fill：图像/视频完全填满容器，可能会扭曲其纵横比。
none：无论容器大小如何，图像/视频都以其原始大小显示。它可能会溢出容器。
scale-down：如果图像/视频大于其原始大小，则会将其缩小以适合容器，否则，它将以其原始大小显示。

适用于

替换的元素，例如图像、视频等。

DOM 语法


object.style.objectFit = "contain | cover | fill | scale-down | none";

CSS object-fit 示例

以下示例演示了如何使用具有不同值的 object-fit 属性，例如 contain、cover、fill、scale-down、none -


<html>
<head>
<style>
	 	h2 {
	 	 	 font-family: Verdana, Geneva, Tahoma, sans-serif;
	 	 	 font-size: 1em;
	 	 	 margin: 1em 0 0.3em;
	 	}

	 	img {
	 	 	 width: 150px;
	 	 	 height: 100px;
	 	 	 border: 1px solid #000;
	 	 	 margin: 10px 0;
	 	}

	 	.fill {
	 	 	 object-fit: fill;
	 	}

	 	.contain {
	 	 	 object-fit: contain;
	 	}

	 	.cover {
	 	 	 object-fit: cover;
	 	}

	 	.none {
	 	 	 object-fit: none;
	 	}

	 	.scale-down {
	 	 	 object-fit: scale-down;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>object-fit: fill</h2>
	 	 	 <img class="fill" src="images/orange-flower.jpg" alt="object-fit: fill" />

	 	 	 <h2>object-fit: contain</h2>
	 	 	 <img class="contain" src="images/orange-flower.jpg" alt="object-fit: contain" />

	 	 	 <h2>object-fit: cover</h2>
	 	 	 <img class="cover" src="images/orange-flower.jpg" alt="object-fit: cover" />

	 	 	 <h2>object-fit: none</h2>
	 	 	 <img class="none" src="images/orange-flower.jpg" alt="object-fit: none" />

	 	 	 <h2>object-fit: scale-down</h2>
	 	 	 <img class="scale-down" src="images/orange-flower.jpg" alt="object-fit: scale-down" />
	 	</div>
</body>
</html>

打印本页