Bootstrap4 图片


Bootstrap 4 图片形状

圆角:

Paris

圆圈:

NYC

缩略图:

San Fran

圆角

这个.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">
亲自试一试 »