手册
目录
.rounded 类为图像添加圆角:
<img src="flower.jpg" class="rounded" alt="Flower">
.rounded-circle 类将图像塑造为圆形:
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
.img-thumbnail 类将图像塑造为缩略图(带边框):
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
使用 .float-start 类将图像向左浮动,或使用 .float-end 向右浮动:
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
为了使图像居中,我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block):
<img src="tulip.jpg" class="mx-auto d-block">
图像有各种尺寸。屏幕也是如此。响应式图像会自动调整以适应屏幕尺寸。
通过将 .img-fluid 类添加到 <img> 标签来创建响应式图像。然后图像将很好地缩放到父元素内。
.img-fluid 类为图像应用 max-width: 100%; 和 height: auto; :
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习