Bootstrap5 图像

圆角图片

.rounded 类为图片添加了圆角。

例如：

圆形图片

.rounded-circle类可以设置椭圆形图片，例如：

缩率图

https://v5.bootcss.com/docs/content/images/#%E5%9B%BE%E7%89%87%E7%9A%84%E7%BC%A9%E7%95%A5%E5%9B%BE

.img-thumbnail类用于设置图片缩率图（图片有边框），例如：

左对齐

使用.float-start类将图像向左浮动

右对齐

使用.float-end类将图片向右浮动。

图片居中

使用.mx-auto(margin:auto) 和 .d-block(display:block)类来设置图片居中对齐。注意：是两个类一起使用。

例如：

响应式图片

https://v5.bootcss.com/docs/content/images/#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%9B%BE%E7%89%87

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

例如：