选择方案

Choosing A Responsive Image Solution — Smashing Magazine
选择Scott Jehl的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
}