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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。