Bootstrap5 图片
图片形状
圆角
这个.rounded类向图片添加圆角：
示例
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
亲自试一试 »
圆圈
这个.rounded-circle类将图片塑造为圆形：
示例
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
亲自试一试 »
缩略图
这个.img-thumbnail类将图片塑造为缩略图（有边框）：
示例
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
亲自试一试 »
对齐图片
使用 使图片向左浮动.float-start类或右侧.float-end:
示例
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
居中图片
通过添加实用程序类使图片居中.mx-auto（外边距：自动）和.d-block（显示：块）到图片：
示例
<img src="paris.jpg" class="mx-auto d-block">
亲自试一试 »
响应式图片
图片有各种尺寸。屏幕也是如此。响应式图片会自动调整以适应屏幕尺寸。
通过添加创建响应式图片.img-fluid类到<img>标签。然后图片将很好地缩放到父元素。
这个.img-fluid类别适用max-width: 100%;和height: auto;到图片：
示例
<img class="img-fluid" src="ny.jpg" alt="New York">
亲自试一试 »
你可知道？
W3.CSS是 Bootstrap 5 的绝佳替代品。
W3.CSS更小、更快、更容易使用。
如果您想学习 W3.CSS，请访问我们的W3.CSS教程。
