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
|