Bootstrap5图像

圆角图片
通过.rounded类实现

<img src="avatar.png" alt="头像" style="width:200px" class="rounded">

圆形
通过.rounded-circle类实现

<img src="avatar.png" alt="头像" style="width:200px" class="rounded-circle">

缩略图
通过.img-thumbnail类实现（图片有边框）

<img src="avatar.png" alt="头像" style="width:200px" class="img-thumbnail">

对齐图像
通过.float-start将图像向左浮动，或使用.float-end向右浮动

<img src="avatar.png" alt="头像" style="width:200px" class="img-thumbnail float-start">
<img src="avatar.png" alt="头像" style="width:200px" class="rounded-circle float-end">

图片居中
通过同时使用.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐。

<img src="avatar.png" alt="头像" style="width:200px" class="mx-auto d-block">

响应式图片
使图片根据屏幕大小自动适应，通过.img-fluid类进行设置，此类主要将max-width：100%;和height:auto；应用于图像，以便它更好地缩放以适合包含元素。

<img src="avatar.png" alt="头像" style="width:200px" class="img-fluid">

初始效果：

未添加响应式的图片效果：

添加响应式的图片效果：