【笔记】《Bootstrap实战》——附录B 实现响应式图片

---

选择方案

• Choosing A Responsive Image Solution — Smashing Magazine
• 选择Scott Jehl的Picturefill技术
  • picturefill | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
  • 响应式图片填充工具picturefill-CSDN博客
  • scottjehl/picturefill

准备响应式图片

• 手机
• 平板
• 电脑

使用JS

• 下载
  • https://cdn.bootcss.com/picturefill/3.0.3/picturefill.js
  • https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js
• 复制到项目文件夹
• 找到如下部分

<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <img src="img/okwu.jpg" alt="OKWU.edu Homepage">
    </div>
    <div class="item">
        <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage">
    </div>
    <div class="item">
        <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation">
    </div>
    <div class="item">
        <img src="img/emancipation.jpg" alt="Emancipation Stories">
    </div>
</div><!-- /.carousel-inner -->

• 修改为：

<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
        <span data-picture data-alt="OKWU.edu Homepage">
            <span data-src="img/okwu-sm.jpg"></span>
            <span data-src="img/okwu.jpg" data-media="(min-width: 640px)"></span>
             <!--[if (lt IE 9) & (!IEMobile)]>
                 <span data-src="img/okwu.jpg"></span>
            <![endif]-->
            <noscript>
                <img src="img/okwu-sm.jpg" alt="OKWU.edu Homepage">
            </noscript>
        </span>
    </div>
    <div class="item">
        <span data-picture data-alt="OKWU Athletics Homepage">
            <span data-src="img/okwu-athletics-sm.jpg"></span>
            <span data-src="img/okwu-athletics.jpg" data-media="(min-width: 640px)"></span>
             <!--[if (lt IE 9) & (!IEMobile)]>
                 <span data-src="img/okwu-athletics.jpg"></span>
            <![endif]-->
            <noscript>
                <img src="img/okwu-sm.jpg" alt="OKWU Athletics Homepage">
            </noscript>
        </span>
    </div>
    <div class="item">
        <span data-picture data-alt="Bartlesville Community Foundation">
            <span data-src="img/bartlesvillecf-sm.jpg"></span>
            <span data-src="img/bartlesvillecf.jpg" data-media="(min-width: 640px)"></span>
             <!--[if (lt IE 9) & (!IEMobile)]>
                 <span data-src="img/bartlesvillecf.jpg"></span>
            <![endif]-->
            <noscript>
                <img src="img/bartlesvillecf-sm.jpg" alt="Bartlesville Community Foundation">
            </noscript>
        </span>
    </div>
    <div class="item">
        <span data-picture data-alt="Emancipation Stories">
            <span data-src="img/emancipation-sm.jpg"></span>
            <span data-src="img/emancipation.jpg" data-media="(min-width: 640px)"></span>
             <!--[if (lt IE 9) & (!IEMobile)]>
                 <span data-src="img/emancipation.jpg"></span>
            <![endif]-->
            <noscript>
                <img src="img/emancipation-sm.jpg" alt="Emancipation Stories">
            </noscript>
        </span>
    </div>
</div><!-- /.carousel-inner -->

• 说明：
  • data-picture：将整个元素标记为响应式图片
  • data-src：指定小设备使用的默认图片
  • data-media指定在什么条件下使用大图片
  • 注释处理IE
  • noscript标签：浏览器禁用js时使用
• 由于标签后代顺序变化，需要修改_carousel.less，找到以下代码：

// Account for jankitude on images
> img,
> a > img {
  .img-responsive();
  line-height: 1;
  min-width: 100%; // added
}

修改为：

// Account for jankitude on images
// > img, // not compatible with PictureFill
// > a > img { // not compatible with PictureFill
img { // adjusted for PictureFill
  .img-responsive();
  line-height: 1;
  min-width: 100%; // added
}

• 保存，编译，测试
• 完成