Bootstrap-v5-页面内容（图片）

一、图片（Images）

• 响应式图片

• 图片的缩略图

• 对齐图片

 

二、代码实例

2.1 响应式图片

通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。

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

2.2 图片的缩略图

除了我们提供的 border-radius utilities 外，你还可以使用 .img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

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

2.3 图片的对齐

图片左右对齐

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

图片居中显示（方式1）

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

图片居中显示（方式2）

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