语法
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
具有 "fill" 值的 object-fit 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Fill value:</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
此处，具有应用值的图像被拉伸以适合框。
在下一个示例中，“cover”值会切断图像的边，保留纵横比，并填充空间。
具有“cover”值的 object-fit 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Cover value:</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
在以下示例中，具有应用值的图像具有原始图像的纵横比。
具有“包含”值的 object-fit 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Contain value:</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
在我们的最后一个示例中，应用值将图像设置为较小的尺寸，就像指定了“包含”或者“无”一样。
具有“缩小”值的 object-fit 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit 属性示例</h2>
<h3>Oroirnal image:</h3>
<img src="/bg.jpg" alt="Tree" width="300" height="200">
<h3>Scale-down value:</h3>
<img class="tree" src="/bg.jpg" alt="Tree" width="300" height="200">
</body>
</html>
object-fit 属性用于指定应如何调整元素大小以适合其内容框。
object-fit 属性允许将图像的内容适合样式表中指定的尺寸。
在属性值的帮助下，可以将内容设置为按比例放大或者缩小、缩小或者拉伸以适应指定的宽度和高度。
有五个值：
- fill
- contain
- cover
- none
- scale-down
| 初始值 | fill |
|---|---|
| 应用于 | 被替换的元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.ObjectFit =“cover”; |
CSS object-fit 属性值说明
| 值 | 描述 |
|---|---|
| fill | 内容已调整大小以填充内容框。这是此属性的默认值。 |
| contain | 剩余的宽高比在元素的边界内包含在剩余的内容中尽可能多地缩放。 |
| cover | 在填充元素的内容框时，内容的宽高比是大小的。它将被剪切以适合内容框。 |
| none | 没有调整大小的内容。 |
| scale-down | 与无或者包含值相同。元素的内容将尺寸较小。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:40 来源：oir作者：oir