图片
响应式图片

在Bootstrap中，给图片添加 .img-fluid 样式，或定义 max-width: 100%、height:auto; 样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

100%x250
IE 10问题以及SVG图形的特殊处理
在IE 10浏览器中，带 .img-responsive 类的SVG图片尺寸可能会不均称，这是一个浏览器级的缺陷，你可以在相应图片元素上添加 width: 100% \9 来解决它（width:100% \9 方法不能普遍引用，否则会造成其它图片格式的混乱，所以Bootstrap没有全局自动引用之）。
缩略图处理

除了我们的边框圆角外，您还可以使用 .img-thumbnail 为图像提供一个1px的圆形边框外观。

200x200
图像对齐处理

对于 .block 属性的块状图片，我们也可以使用 浮动定义规范 或 文字对齐规范，来实现对图像的对齐、浮动控制，带 .block 块属性的图片，可以自动获得 .mx-auto 的位置对齐属性。

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>
Picture元素

如果使用 <picture> 元素为特定的 <img> 指定多个 <source&> 元素，请确保将 .img-* 类添加到 <img> 而不是 <picture> 标记。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

<picture> 元素可实现图片在不同屏幕下的针对性响应式，其使用逻辑如下：

<picture>
  <source src="大规格图片.jpg"  media="(min-width: 800px)" >
  <source src="中规格图片.jpg"  media="(min-width: 600px)">
  <source src="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>