Bootstrap5 图片（Images）

bootstrap5
内容

图片

将图像设置为响应式（这样它们永远不会变得比其父元素大），并为它们添加轻量级样式 -- 所有这些都通过类来实现的。

响应式图片

在Bootstrap中的图片是用.img-fluid.来做响应的，它应用max-width: 100%;和height: auto;到图片上，使它与父元素一起伸缩。

<img src="..." class="img-fluid" alt="...">

在线运行

图片缩略图

除了我们的border-radius外，你还可以使用.img-thumbnail来给图像一个圆润的1px边框外观。

<img src="..." class="img-thumbnail" alt="...">

在线运行

排列图片

可以使用浮动类或文本对齐类将图片对齐。块级图片可以使用.mx-auto margin实用类居中。

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

在线运行

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

在线运行

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

在线运行

照片（Picture）

如果您使用<picture>元素为特定的<img>指定多个<source>元素，请确保将.img-*类添加到<img>中，而不是<picture>标签中。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>