数据结构
网络
关系数据库管理系统 (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+ 次浏览
