CSS 如何定位图片？

在 CSS 中有很多方法可以定位图片，例如使用 object-position 属性，使用 float 属性（用于将元素对齐到左侧或右侧）。

使用 object-position 属性

CSS 中的 object-position 属性 指定了内容在容器内的对齐方式。它与 object-fit 属性 一起使用，用于定义如 <video> 或 <img> 元素在其内容框内如何通过 x/y 坐标进行定位。

在使用 object-fit 属性时，object-position 的默认值为 50% 50%，因此默认情况下，所有图片都位于其内容框的中心。我们可以通过使用 object-position 属性来更改默认的对齐方式。

语法

object-position 属性的 position 值定义了视频或图片在容器内的位置。它接受两个数值，第一个值控制 x 轴，第二个值控制 y 轴。我们可以使用字符串，如 left, right 或 center 等来定位容器内的图片。它允许使用负值。

我们可以通过一些示例来更清楚地理解它。

示例

在此示例中，我们使用字符串值，如 "right top", "center top" 和 "left top" 来定位图片。

输出

现在，这里有另一个使用 object-position 属性的示例。

示例

在此示例中，我们使用的是 initial 值，该值将图片定位在中心。这是因为 initial 将属性设置为其默认值 50% 50%。我们还使用了数值 200px 和 100px。

输出

使用 float 属性

CSS float 属性是一个定位属性，用于将元素推到左侧或右侧，允许其他元素环绕它。通常，它与图片和布局一起使用。

元素只能水平浮动。因此，只能向左或向右浮动元素，不能向上或向下浮动。浮动元素可以尽可能地向左或向右移动。简单来说，这意味着浮动元素可以显示在最左侧或最右侧。

让我们来看一个使用 float 属性的示例。

示例

输出