在 Bootstrap 4 中，图像样式可以通过内置的类来轻松修改，以实现不同的形状、大小和效果。以下是关于如何使用 Bootstrap 4 样式调整图像的详细介绍。

1. 圆形图像（Rounded Images）

使用 class="rounded" 可以将图像的边缘做圆角处理，使图像看起来有一个圆滑的外观。

示例：

<img src="path/to/image.jpg" class="rounded" alt="Rounded Image">

这种方式会为图像添加圆角效果，但图像仍然是矩形。

2. 圆形图像（Circle Images）

如果你希望图像变成一个圆形，可以使用 class="rounded-circle"。此时，图像的宽度和高度必须相等，并且通过 border-radius: 50% 完全变为圆形。

示例：

<img src="path/to/image.jpg" class="rounded-circle" alt="Circle Image" width="150" height="150">

注意：确保图像的宽高相同，才会形成圆形。

3. 矩形图像（Square Images）

如果你想让图像保持矩形，Bootstrap 4 默认的 img 标签已经能够保持矩形外观。不过，你也可以通过设置 width 和 height 来控制其具体的矩形尺寸。

示例：

<img src="path/to/image.jpg" class="img-fluid" alt="Square Image" width="300" height="200">

img-fluid 类确保图像自适应屏幕宽度（响应式），同时保持比例。如果你没有使用 img-fluid，你可以直接控制宽度和高度。

4. 圆角矩形图像（Rounded Corners）

你可以使用 class="rounded-lg"、class="rounded-sm" 和 class="rounded" 来为图像提供不同程度的圆角效果。

示例：

<img src="path/to/image.jpg" class="rounded-lg" alt="Large Rounded Image">
<img src="path/to/image.jpg" class="rounded-sm" alt="Small Rounded Image">
<img src="path/to/image.jpg" class="rounded" alt="Default Rounded Image">
  • rounded: 默认的圆角。
  • rounded-sm: 较小的圆角。
  • rounded-lg: 较大的圆角。

5. 响应式图像（Responsive Images）

Bootstrap 4 提供了 img-fluid 类，使图像变为响应式图像。响应式图像会自动根据容器的宽度调整大小，保持其宽高比。

示例：

<img src="path/to/image.jpg" class="img-fluid" alt="Responsive Image">

这意味着无论屏幕大小如何变化，图像都会自动调整大小。

6. 图像上显示文本（Overlay Text）

如果你需要在图像上显示文本或其他内容，Bootstrap 提供了 position-relative 和 position-absolute 类来帮助你定位文本。

示例：

<div class="position-relative">
  <img src="path/to/image.jpg" class="img-fluid" alt="Image with Overlay">
  <div class="position-absolute top-50 start-50 translate-middle text-white">
    <h3>Overlay Text</h3>
  </div>
</div>

这里使用了 position-absolute 来将文本居中显示在图像上方。

7. 裁剪图像为圆形或其他形状（Clipping Images）

如果你想将图像裁剪为特定形状（例如圆形或其他自定义形状），你可以使用 CSS clip-path 属性进行裁剪。

示例：

<style>
  .clip-circle {
    clip-path: circle(50% at 50% 50%);
  }
</style>

<img src="path/to/image.jpg" class="clip-circle" alt="Clipped Circle Image" width="150" height="150">

这将图像裁剪成一个圆形。

8. 图像的占位符（Placeholder Images）

Bootstrap 4 不直接提供占位符图像功能，但你可以通过工具（如 holder.js）生成占位符图像，或者直接在图像加载前使用一个占位图。

示例：

<img src="https://via.placeholder.com/300x200" class="img-fluid" alt="Placeholder Image">

这个例子通过 via.placeholder.com 生成一个 300×200 的占位图像。

9. 图像的圆形和边框（Circle Image with Border）

如果你需要给圆形图像添加边框，可以结合 border 类来实现。

示例：

<img src="path/to/image.jpg" class="rounded-circle border border-dark" alt="Circle Image with Border" width="150" height="150">

这里，border 类添加了一个默认的边框，而 border-dark 设置了深色边框。

10. 图片卡片（Image in Card）

Bootstrap 4 的卡片（Card）组件支持将图像嵌入卡片内，并可以根据需要对图像进行响应式处理。

示例：

<div class="card" style="width: 18rem;">
  <img src="path/to/image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

在卡片中使用 card-img-top 可以确保图像自适应卡片的宽度，并且始终显示在卡片的顶部。

总结

Bootstrap 4 提供了简单易用的类来控制图像的形状、大小和响应性。你可以通过 rounded、rounded-circle、img-fluid 等类来调整图像的外观，并通过 CSS 进一步自定义图像的形状和效果。通过结合 Bootstrap 的其他组件（如卡片、按钮等），你可以更灵活地使用图像元素。

如果你有更多问题或需要其他示例，随时告诉我！