資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 CSS 中設定圖片位置？
通常，圖片在網頁上的預設位置是左對齊。但是，您可以根據需要更改圖片的位置，並在需要顯示特定圖片的網頁上手動設定圖片的位置。
現在讓我們討論一下使用 CSS 在網頁上定點陣圖片的方法。一般來說，使用 CSS 在網頁上定點陣圖片有兩種方法或途徑，如下所示：
使用 CSS 的 float 屬性
使用 CSS 的 object-position 屬性
現在讓我們詳細瞭解以上方法，並藉助程式碼示例在網頁上定點陣圖片。
使用 float 屬性定位
CSS 中的 `float` 屬性用於定義或設定網頁上任何專案或元素的浮動。我們可以使用此屬性設定圖片的浮動，以將其定位在網頁上的特定位置。
語法
以下語法將顯示如何使用 float 屬性設定圖片的位置：
float: left | right | inherit | initial | none;
**left** - 此值將元素浮動到網頁的左側。
**right** - 此值將元素浮動到網頁的右側。
**inherit** - 它將繼承使用它的元素的父元素的 float 屬性值。
**initial | none** - 這些屬性值將 float 設定為初始值或預設值。
現在讓我們透過實際操作和程式碼示例來了解這種在網頁上定點陣圖片的方法：
步驟
**步驟 1** - 在第一步中，我們將在 HTML 文件中新增一個包含圖片的 div 元素。
**步驟 2** - 在下一步中，我們將在上一步中定義的 div 容器內新增兩個不同的帶有類的圖片。
**步驟 3** - 在最後一步中，我們將使用類來選擇圖片，並使用帶有不同值的 float 屬性來將它們定位在不同的位置。
示例
以下程式碼示例將向您解釋如何在實踐中使用 float 屬性在網頁上浮動或定點陣圖片：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
width: 100%;
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.images{
height: 200px;
width: 200px;
}
.image1{
float: left;
}
.image2{
float: right;
}
</style>
</head>
<body>
<center>
<h2>Seting the position of an image in CSS</h2>
<p>The below images are positioned using the float property of CSS.</p>
<div class = "main-container">
<div class = "container-1">
<p>The first image contains <b> float: left; </b> property to position on left side, while the second image contains <b> float: right; </b> property to position on right side.</p>
<img class = "images image1" src = "https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" alt = "Image1">
<img class = "images image2" src = "https://play-lh.googleusercontent.com/FCMz5gMEQlgvAn99DzjX9Z2CuQ_MY2aInD1j87Y7uC1cimimyI2YjvHeqGVFyPW6EQ" alt = "Image2">
</div>
</div>
</center>
</body>
</html>
在上面的示例中，我們使用了兩個不同的圖片，併為 float 屬性使用了不同的值，以使用 CSS 將它們定位或浮動到網頁上的不同方向。我們使用 `float: left` 和 `float: right` 將第一個圖片浮動到左側，第二個圖片浮動到其容器元素的右側。
使用 object-position 屬性定位
object-position 屬性用於相對於包含影像的內容框的頂部和左側座標定點陣圖像。object-position 屬性可以與不同型別的值一起使用，如下所述：
**使用數值** - object-position 屬性接受兩個數值。前一個值指定物件與其容器左側的空間，即水平方向 (x 軸)，而後一個值指定其父容器頂部在垂直方向 (y 軸) 的距離。
語法
以下語法將顯示如何使用數值使用 object-position 屬性：
object-position: number_value px number_value px; // left distance top distance
**字串值** - object-position 屬性也可以與字串值一起使用。您可以簡單地使用兩個值成對指定物件的位置，每次從 `right | left | top | bottom` 值中選擇一個。
語法
以下語法將幫助您理解如何使用字串值使用 object-position 屬性：
object-position: right | left | top | bottom;
現在讓我們瞭解 object-position 屬性的實際實現，並使用兩種型別的值在網頁上定點陣圖片。
方法
此示例的方法與上面示例的演算法非常相似。您只需要將上一個示例中的 `float` 屬性替換為 `object-position` 屬性即可在網頁上定點陣圖片。
示例
以下示例將說明如何在 CSS 中使用 object-position 屬性使用不同型別的值在網頁上定點陣圖片：
<!DOCTYPE html>
<html>
<head>
<style>
.main-container{
display: flex;
}
.container-1{
width: 100%;
border: 2px solid bisque;
background-color: aqua;
margin: 0 5px;
padding: 30px;
}
.images{
height: 200px;
width: 200px;
overflow: visible;
}
.image1{
object-position: 50px 50px;
object-fit: cover;
}
.image2{
object-position: center top;
object-fit: cover;
}
</style>
</head>
<body>
<center>
<h2>Setting the position of an image in CSS</h2>
<p>The below images are positioned using the object position property of CSS. </p>
<div class = "main-container">
<div class = "container-1">
<p>The below image contains the <b> object-position: numerical_value; </b> property to position itself at the defined position.</p>
<img class = "images image1" src = "https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" alt = "Image1">
</div>
<div class = "container-1">
<p>The below image contains the <b> object-position: string_value; </b> property to position itself at the defined position.</p>
<img class = "images image2" src = "https://play-lh.googleusercontent.com/FCMz5gMEQlgvAn99DzjX9Z2CuQ_MY2aInD1j87Y7uC1cimimyI2YjvHeqGVFyPW6EQ" alt = "Image2">
</div>
</div>
</center>
</body>
</html>
在此示例中，我們使用了 CSS 的 object-position 屬性在網頁上定點陣圖片。我們使用數值與第一個圖片一起使用 object-position 屬性來根據給定的值從左側和頂部偏移其位置。而對於第二個圖片，我們使用字串值來定位它。
結論
在本文中，我們學習瞭如何在網頁上定點陣圖片。我們討論了兩種不同的方法，藉助 `float` 和 `object-position` 屬性來定點陣圖片，併為每種方法在不同的程式碼示例中實際實現了它們。
1K+ 次瀏覽
