CSS object-fit
属性用于指定如何 <img> 或 <video> 应调整大小以适合其容器。
CSS object-fit
属性用于指定 <img> 或 <video> 应该如何 调整大小以适合其容器。
该属性告诉内容以多种方式填充容器;例如 “保持纵横比”或“伸展并占据尽可能多的空间” 可能的”。
看下面这张来自巴黎的图片。该图像宽 400 像素,高 300 像素:
但是,如果我们将上面的图像设置为宽度的一半(200 像素)和相同的高度(300 像素),它将如下所示:
img {
width: 200px;
height:
300px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:300px;
}
</style>
</head>
<body>
<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
我们看到图像被压缩以适合 200x300 像素的容器 (其原始纵横比被破坏)。
这是 object-fit
属性的来源 object-fit
属性可以采用以下之一 以下值:
填充
- 这是默认值。图像调整大小以填充 给定维度。如有必要,图像将被拉伸或压缩以适合
包含
- 图像 保持其纵横比,但调整大小以适合给定尺寸
封面
- 图像保持其纵横比 并填充给定的维度。图像将被裁剪以适合
none
- 图像未调整大小
缩小
- 图像是 缩小到 none
或 的最小版本 包含
如果我们使用 object-fit: cover;
图像将保持其纵横比 并填充给定的维度。图像将被裁剪以适合:
img {
width: 200px;
height:
300px;
object-fit: cover;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
如果我们使用 object-fit: contains;
图像将保持其纵横比,但会调整大小以适合给定的尺寸:
img {
width: 200px;
height:
300px;
object-fit: contain;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Using object-fit: contain</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
如果我们使用 object-fit: fill;
图像将调整大小以填充给定的尺寸。如有必要,图像将被拉伸或压缩以适合:
img {
width: 200px;
height:
300px;
object-fit: fill;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Using object-fit: fill</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
如果我们使用 object-fit: none;
图像不会调整大小:
img {
width: 200px;
height:
300px;
object-fit: none;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Using object-fit: none</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
如果我们使用 object-fit:scale-down;
图像将缩小到 none
的最小版本或 包含
:
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Using object-fit: scale-down</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
这里我们有两个图像,我们希望它们填充浏览器窗口 50% 的宽度和 100% 的高度。
在下面的示例中,我们不使用 object-fit
,因此当我们调整浏览器窗口大小时,图像的宽高比将被破坏:
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>Not Using object-fit</h2>
<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>
</body>
</html>
在下一个示例中,我们使用 object-fit: cover;
,因此当我们调整浏览器窗口大小时,图像的宽高比将被保留:
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>Using object-fit</h2>
<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>
<div style="width:100%;height:400px;">
<img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
<img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>
</body>
</html>
以下示例演示了 object-fit
属性的所有可能值 在一个例子中:
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h1>The object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">
</body>
</html>
下表列出了 CSS object-* 属性:
指定如何调整 <img> 或 <video> 的大小以适合其容器
指定如何使用 x/y 定位 <img> 或 <video> 其“自己的内容框”内的坐标