Bootstrap 图片

Bootstrap 图片

Bootstrap 图片样式

Bootstrap 5 提供了一些工具类（utility classes）来样式化图片，使其具有响应性并添加常见的视觉效果。

圆角

.rounded 类为图片添加圆角。所有现代浏览器都支持此效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rounded Image Example</title>
  <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="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

圆形

.rounded-circle 类将图片形状变成圆形。请确保你的图片是正方形以获得完美的圆形；否则它将显示为椭圆形。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Image Example</title>
  <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="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

缩略图

.img-thumbnail 类为图片添加浅色边框和内边距（padding），使其呈现缩略图外观。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thumbnail Image Example</title>
  <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="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

响应式图片

图片需要适应不同的屏幕尺寸。响应式图片会自动调整以适应其父元素的宽度。

通过向 <img> 标签添加 .img-fluid 类来创建响应式图片。此类为图片应用 max-width: 100%; 和 height: auto;，确保当父容器变窄时图片会缩小，但永远不会放大超过其原始尺寸。

对于更高级的响应式图片技术，例如艺术方向（art direction）或提供不同分辨率的图片，请考虑使用 HTML <picture> 元素。Bootstrap 的 .img-fluid 类也可以应用于 <picture> 元素内的图片。

此外，为了提高性能，你可以在 <img> 标签上使用 loading="lazy" 属性，以延迟加载屏幕外的图片，直到用户滚动到附近。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Example</title>
  <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="img_chania.jpg" class="img-fluid" alt="Chania" loading="lazy">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

使用网格系统构建图片画廊

你可以结合使用 Bootstrap 的网格系统（grid system）和图片类（如 .img-thumbnail 和 .img-fluid）来创建响应式图片画廊。网格列将根据屏幕尺寸进行调整，而 .img-fluid 将确保图片在其列内缩放。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery Example</title>
  <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">
  <div class="row">
    <div class="col-md-4 mb-3">
      <a href="pulpitrock.jpg" class="d-block">
        <img src="pulpitrock.jpg" class="img-fluid img-thumbnail" alt="Pulpit Rock">
        <p class="mt-2">Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      </a>
    </div>
    <div class="col-md-4 mb-3">
      <a href="moustiers-sainte-marie.jpg" class="d-block">
        <img src="moustiers-sainte-marie.jpg" class="img-fluid img-thumbnail" alt="Moustiers Sainte Marie">
        <p class="mt-2">Moustiers-Sainte-Marie: Considered one of the "most beautiful villages of France".</p>
      </a>
    </div>
    <div class="col-md-4 mb-3">
      <a href="cinqueterre.jpg" class="d-block">
        <img src="cinqueterre.jpg" class="img-fluid img-thumbnail" alt="Cinque Terre">
        <p class="mt-2">The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      </a>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在此示例中，<a> 标签上的 d-block 确保链接占据完整宽度，使得整个图片区域都可点击。mb-3 在每列的底部添加边距以产生间距。

使用比例辅助类实现响应式嵌入

为了让视频或幻灯片在任何设备上都能保持其宽高比（aspect ratio）并正确缩放，Bootstrap 5 提供了比例辅助类（ratio helper classes）。这些类取代了旧的 .embed-responsive 类。

将你的 <iframe>、<embed>、<video> 或 <object> 包裹在一个带有 .ratio 类和宽高比类（例如 .ratio-16x9、.ratio-4x3 等）的父 <div> 中。嵌入的元素本身不需要特殊的类，它会自动缩放。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Embed Example</title>
  <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">
  <!-- 16:9 aspect ratio -->
  <div class="ratio ratio-16x9 mb-3">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" allowfullscreen></iframe>
  </div>

  <!-- 4:3 aspect ratio -->
  <div class="ratio ratio-4x3">
    <iframe src="https://www.youtube.com/embed/anotherVideoID" title="Another YouTube video player" allowfullscreen></iframe>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

	宽高比是什么？图片或视频的宽高比描述了其宽度与高度的比例关系。常见的宽高比包括 16:9（高清视频和现代显示器的标准）和 4:3（旧式电视和显示器标准）。Bootstrap 为常见的比例提供了类，如 .ratio-1x1、.ratio-4x3、.ratio-16x9 和 .ratio-21x9。

可以使用 CSS 自定义属性（变量）实现自定义宽高比。更多详情请参阅 Bootstrap 官方文档中的 Ratios 部分。

完整的 Bootstrap 图片参考

有关所有图片相关类和响应式嵌入辅助类的完整参考，请查阅 Bootstrap 官方文档中的 Images 和 Ratios 部分。