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 Pathfinder
Track your progress - it's free!
