图片

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

IE 10问题以及SVG图形的特殊处理

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

图片 - 图2

  1. <img src="..." alt="..." class="img-thumbnail">

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

  1. <img src="..." class="rounded mx-auto d-block" alt="...">

图片 - 图5

HTML5标准提供了一个全新的<picture> 元素，它可以为 指定多个<source> 定义，请确保在<img> 标签里使用使用.img-* CSS样式进行定义绑定，而不是仅仅认为引用了 <img> 就达成了，如下第三行代码所示：

  1.   <source srcset="..." type="image/svg+xml">
  3. </picture>

元素可实现图片在不同屏幕下的针对性响应式，其使用逻辑如下(译者补充)：