bootstrap_ref_css_images

Bootstrap CSS 图片参考

Bootstrap 图片

Bootstrap 提供了几个类来样式化图片，使其具有响应式特性并添加简单的形状。

图片样式类

在 Bootstrap 5 中，可以使用以下类来样式化图片：

• .img-fluid: 使图片具有响应式。它为图片应用 max-width: 100%; 和 height: auto;，使其随父元素缩放。这取代了旧的 .img-responsive 类。
• .rounded: 为图片添加圆角。
• .rounded-circle: 将图片裁剪成圆形。
• .img-thumbnail: 将图片样式化为带有内边距边框的缩略图。

示例用法：

<img src="path/to/your/image.jpg" class="img-fluid rounded" alt="Responsive rounded image">
<img src="path/to/your/image.jpg" class="img-fluid rounded-circle" alt="Responsive circular image">
<img src="path/to/your/image.jpg" class="img-fluid img-thumbnail" alt="Responsive thumbnail image">

使用 .img-fluid 实现响应式图片

要在 Bootstrap 5 中使图片具有响应式，请为 <img> 标签添加 .img-fluid 类。图片随后将在其父容器内适当地缩放。

.img-fluid 类为图片应用 max-width: 100%; 和 height: auto;。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Image Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <img src="docs/english/books/bootstrap/images/cinqueterre.jpg" class="img-fluid" alt="Cinque Terre">
  </div>
  <!-- Bootstrap JS Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

对齐图片

您可以使用浮动（float）工具类，例如 .float-start 和 .float-end 来对齐图片，或者使用 .mx-auto 和 .d-block 来居中块级图片。

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">

有关更高级的图片处理，例如使用 <picture> 元素进行艺术方向控制或提供不同的图片格式（如 WebP），请参考官方 Bootstrap 关于图片和 HTML5 标准的文档。