CSS object-fit 属性


目录

    显示目录


CSS object-fit 属性用于指定如何 <img> 或 <video> 应调整大小以适合其容器。


CSS object-fit 属性

CSS object-fit 属性用于指定 <img> 或 <video> 应该如何 调整大小以适合其容器。

该属性告诉内容以多种方式填充容器;例如 “保持纵横比”或“伸展并占据尽可能多的空间” 可能的”。

看下面这张来自巴黎的图片。该图像宽 400 像素,高 300 像素:

Paris

但是,如果我们将上面的图像设置为宽度的一半(200 像素)和相同的高度(300 像素),它将如下所示:

Paris

例子

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; 图像将保持其纵横比 并填充给定的维度。图像将被裁剪以适合:

Paris

例子

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; 图像将保持其纵横比,但会调整大小以适合给定的尺寸:

Paris

例子

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; 图像将调整大小以填充给定的尺寸。如有必要,图像将被拉伸或压缩以适合:

Paris

例子

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; 图像不会调整大小:

Paris

例子

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 的最小版本或 包含

Paris

例子

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,因此当我们调整浏览器窗口大小时,图像的宽高比将被破坏:

例子

Norway Paris

自己尝试一下 →

<!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;,因此当我们调整浏览器窗口大小时,图像的宽高比将被保留:

例子

Norway Paris

自己尝试一下→

<!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>



CSS object-fit 更多示例

以下示例演示了 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 对象-* 属性

下表列出了 CSS object-* 属性:

object-fit

指定如何调整 <img> 或 <video> 的大小以适合其容器

object-position

指定如何使用 x/y 定位 <img> 或 <video> 其“自己的内容框”内的坐标