Bootstrap 4 图片
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` (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="img_chania.jpg" alt="Chania">
自己动手试一试 »
W3schools 学习路径
跟踪您的进度 - 免费！
