CSS object-fit属性用法及代码示例

此 CSS 属性指定如何调整视频或图像的大小以适合其内容框。它定义了元素如何适应具有既定宽度和高度的容器。

它通常应用于图像或视频。此属性指定元素如何对其容器的宽度和高度做出反应。

用法

object-fit: fill | contain | cover | none | scale-down | initial | inherit;

值

该属性的主要五个值定义如下：

fill:它是默认值。使用此值，整个对象会填满容器。替换内容的大小可以填充内容框。如果对象的纵横比与框的纵横比不匹配，则对象将被挤压或拉伸以适应框。图像将填充该区域；甚至它的纵横比也不匹配。

contain:它调整元素内容的大小以保持包含在容器内。它使图像适合框的宽度和高度，同时保持图像的纵横比。被替换的内容被缩放以保持纵横比，同时适合元素的内容框。

cover:它调整元素内容的大小以覆盖其容器。它用图像填充整个框。如果对象的纵横比与框的纵横比不匹配，它会裁剪对象以适应。

none:它不会调整替换内容的大小。图像保留其原始大小并忽略父级的高度和宽度。

scale-down：将内容大小设置为无或包含。它导致最小的对象大小。它通过比较 none 和 contains 来找到最小的具体对象大小。

initial:它将属性设置为其默认值，即图像被拉伸以适合容器，因为默认值是填充。

inherit:它从其父元素继承值。

现在，让我们通过使用每个示例来理解上述属性值。

示例：使用填充值

<html>
<head>
<style>
body{
text-align:center;
}
#img1{
width:300px;
height:300px;
border:7px solid red;
}
#obj {
width:500px;
height:500px;
object-fit:fill;
border:7px solid red;
}
#left{
float:left;
text-align:center;
padding-left:200px;
}
#center{
float:center;
text-align:center;
}

</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit:fill; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>

输出

示例 - 使用包含值

<html>
<head>
<style>
body{
text-align:center;
}
#img1{
width:300px;
height:300px;
border:7px solid red;
}
#obj {
width:500px;
height:500px;
object-fit:contain;
border:7px solid red;
}
#left{
float:left;
text-align:center;
padding-left:200px;
}
#center{
float:center;
text-align:center;
}

</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit:contain; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>

输出

示例 - 使用覆盖值

Example- Using cover value
<html>
<head>
<style>
body{
text-align:center;
}
#img1{
width:300px;
height:300px;
border:7px solid red;
}
#obj {
width:500px;
height:500px;
object-fit:cover;
border:7px solid red;
}
#left{
float:left;
text-align:center;
padding-left:200px;
}
#center{
float:center;
text-align:center;
}

</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit:cover; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>

输出

示例 - 使用 none 值

<html>
<head>
<style>
body{
text-align:center;
}
#img1{
width:300px;
height:300px;
border:7px solid red;
}
#obj {
width:500px;
height:500px;
object-fit:none;
border:7px solid red;
}
#left{
float:left;
text-align:center;
padding-left:200px;
}
#center{
float:center;
text-align:center;
}

</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit:none; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>

输出

示例 - 使用 scale-down 值

<html>
<head>
<style>
body{
text-align:center;
}
#img1{
width:300px;
height:300px;
border:7px solid red;
}
#obj {
width:500px;
height:500px;
object-fit:scale-down;
border:7px solid red;
}
#left{
float:left;
text-align:center;
padding-left:200px;
}
#center{
float:center;
text-align:center;
}

</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit:scale-down; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>

输出

相关用法

注：本文由纯净天空筛选整理自 CSS object-fit property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。