42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
|
---
|
|||
|
title: Object Fit
|
|||
|
localeTitle: 对象适合
|
|||
|
---
|
|||
|
# 对象适合
|
|||
|
|
|||
|
`object-fit`属性指定元素如何响应其父框的宽度/高度。
|
|||
|
|
|||
|
此属性可用于图像,视频或任何其他媒体。它还可以与`object-position`属性一起使用,以更好地控制媒体的显示方式。
|
|||
|
|
|||
|
基本上我们使用`object-fit`属性来定义它如何拉伸或挤压内联媒体。
|
|||
|
|
|||
|
## 句法
|
|||
|
|
|||
|
```css
|
|||
|
.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
|