1.3 KiB
1.3 KiB
| title | localeTitle |
|---|---|
| Object Fit | 对象适合 |
对象适合
object-fit属性指定元素如何响应其父框的宽度/高度。
此属性可用于图像，视频或任何其他媒体。它还可以与object-position属性一起使用，以更好地控制媒体的显示方式。
基本上我们使用object-fit属性来定义它如何拉伸或挤压内联媒体。
句法
.element {
object-fit: fill || contain || cover || none || scale-down;
}
值
-
fill： 这是默认值 。无论宽高比如何，都要调整内容大小以匹配其父框。 -
contain：使用正确的宽高比调整内容大小以填充其父框。 -
cover：类似于contain但经常裁剪内容。 -
none：以原始大小显示图像。 -
scale-down：比较none和contain之间的差异，找到最小的具体对象大小。
浏览器兼容性
大多数现代浏览器都支持object-fit ，有关兼容性的最新信息，请查看http://caniuse.com/#search=object-fit
还有一个不受支持的浏览器（主要是IE）的polyfill。 https://github.com/anselmh/object-fit
更多信息
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://drafts.csswg.org/css-images-3/#the-object-fit