Bootstrap4 图片
Bootstrap 4 图片形状
圆角:
圆圈:
缩略图:
圆角
这个.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-right
类或向左.float-left
:
示例
<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">
亲自试一试 »
居中图片
通过添加实用程序类使图片居中.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="img_chania.jpg" alt="Chania">
亲自试一试 »