CSS object-position屬性用法及代碼示例

此 CSS 屬性用於指定容器內內容的對齊方式。它與 object-fit 屬性一起使用來描述像 <video> 或 <img> 這樣的元素如何在其容器內使用 x/y 坐標定位。

使用 object-fit 屬性時，object-position 的默認值為 50% 50%，因此，默認情況下，所有圖像都位於其容器的中心。我們可以使用 object-position 屬性更改默認對齊方式。

用法

object-position:<position> | inherit | initial;

值

position:它定義了視頻或圖像在容器內的位置。它需要兩個數值(例如 0 10px)，其中第一個值管理 x 軸，而第二個值控製 y 軸。它可以是一個字符串(左、右或中心)，也可以是數字(以 % 或 px 為單位)。它允許負值。其默認值為 50% 50%。我們可以使用字符串值，如右上、左下等。

initial:它將屬性設置為默認值。

inherit:它從其父元素繼承屬性。

現在，讓我們看一些說明 object-position 屬性的示例。

示例

<!DOCTYPE html>
<head>

<title>CSS object-position property</title>
<style>
body{
text-align:center;
}
img {
width:400px;
height:400px;
border:5px solid red;
background-color:lightblue;
object-fit:none;
object-position:90px 200px;
}
</style>
</head>

<body>
<h2> object-position:90px 200px </h2>
<img src= "train1.png"/>
</body>
</html>

輸出

程序執行後，我們將得到如下圖所示的輸出。

示例 - 使用 "center top"

<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align:center;
}
img {
width:400px;
height:300px;
border:5px solid red;
background-color:lightblue;
object-fit:none;
object-position:center top;
}
</style>
</head>

<body>
<h2>object-position:center top</h2>
<img src= "train1.png"/>
</body>
</html>

輸出

示例 - 使用 "right top"

<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align:center;
}
img {
width:400px;
height:300px;
border:5px solid red;
background-color:lightblue;
object-fit:none;
object-position:center top;
}
</style>
</head>

<body>
<h2>object-position:center top</h2>
<img src= "train1.png"/>
</body>
</html>

輸出

示例 - 使用 "left top"

<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align:center;
}
img {
width:400px;
height:300px;
border:5px solid red;
background-color:lightblue;
object-fit:none;
object-position:left top;
}
</style>
</head>

<body>
<h2>object-position:left top</h2>
<img src= "train1.png"/>
</body>
</html>

輸出

示例 - 使用 "initial"

當我們使用初始值時，圖像將被定位到中心。這是因為初始將屬性設置為其默認值，即 50% 50%。

<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align:center;
}
img {
width:400px;
height:400px;
border:5px solid red;
background-color:lightblue;
object-fit:none;
object-position:initial;
}
</style>
</head>

<body>
<h2> object-position:initial</h2>
<img src= "train1.png"/>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS object-position property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。