• 图片
    • 响应式图片
      • IE 10问题以及SVG图形的特殊处理
  • 缩略图处理
  • 图像对齐处理
  • Html 5 标准之Picture元素

    图片

    BootStrap图片处理的示例和文档,由于我们为图片添加了轻量级的无干扰样式和响应式行为,因此在BootStrap设计中引用图片可以更加方便且不会轻易撑破其它元素。

    响应式图片

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

    图片  - 图1

    1. <img src="..." class="img-fluid" alt="Responsive image">

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

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

    缩略图处理

    您可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式(你也可以使用系统提供的边隙间距方法,如.p-1再加上边框颜色定义达成),效果如下:

    图片  - 图2

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

    图像对齐处理

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

    图片  - 图3

    1. <img src="..." class="rounded float-left" alt="...">
    2. <img src="..." class="rounded float-right" alt="...">

    图片  - 图4

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

    图片  - 图5

    1. <div class="text-center">
    2. <img src="..." class="rounded" alt="...">
    3. </div>

    Html 5 标准之Picture元素

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

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

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

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