Bootstrap 5 图片
图片形状
圆角
`.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`（margin:auto）和 `.d-block`（display:block）来居中图片
示例
<img src="paris.jpg" class="mx-auto d-block">
自己动手试一试 »
响应式图片
图片有各种尺寸。屏幕也是。响应式图片会自动调整以适应屏幕尺寸。
通过为 `<img>` 标签添加 `.img-fluid` 类来创建响应式图片。这样，图片就能很好地适应父容器的大小。
`.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 教程。
W3schools 学习路径
跟踪您的进度 - 免费！
