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-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">
总结
本文介绍了Bootstrap 5 图片的使用,如有问题欢迎私信和评论