📌  相关文章
📜  如何使用相同的 img - CSS (1)

📅  最后修改于: 2023-12-03 15:08:26.826000             🧑  作者: Mango

如何使用相同的 img - CSS

当我们需要在页面中使用相同的图像，但需要在不同的位置和大小上使用时，可以使用 CSS 来进行调整和定位。以下是使用相同的 img 元素和 CSS 实现的示例：

HTML 代码
<!-- 在 body 标签中添加一个 img 元素 -->
<body>
  <img src="https://via.placeholder.com/150x150" alt="placeholder image">
</body>
CSS 代码
/* 定义一个类名为 .img-size */
.img-size {
  width: 100px;
  height: 100px;
}

/* 定义一个类名为 .img-position */
.img-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
用法示例
<!-- 在使用相同的 img 元素时，只需添加相应的类名即可 -->
<!-- 使用 .img-size 类名来调整图像的大小 -->
<img class="img-size" src="https://via.placeholder.com/150x150" alt="placeholder image">

<!-- 使用 .img-position 类名来定位图像 -->
<div class="img-position">
  <img src="https://via.placeholder.com/150x150" alt="placeholder image">
</div>
解释

以上 CSS 代码定义了两个类名，一个是 .img-size，用于设置图像的大小；另一个是 .img-position，用于设置图像的位置。在使用相同的 img 元素时，只需添加相应的类名即可轻松地调整图像的大小和位置。

在 HTML 代码中，只需添加一个 img 元素即可。然后，在使用相同的 img 元素时，只需添加相应的类名即可轻松地调整图像的大小和位置，实现代码的复用。

注：此示例中的图像链接是通过 placeholder.com 生成的占位符。