bootstrap中图片响应式

主要解决的是在轮播图中图片响应式的问题

目的

各种终端都需要正常显示图片

移动端应该使用更小（体积）的图片

实现方式

给标签添加两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）

通过JS的方式获取屏幕的宽度；

判断屏幕宽度是否小于一定的值（如：768）

根据判断情况决定使用具体的大图还是小图

具体实现步骤：

1.获取屏幕宽度

2.判断屏幕属于大还是小

3.根据大小为界面上的每一张轮播图设置背景

$(function () {

   function resize() {

       var windowWidth = $(window).width();

       var isSmallScreen = windowWidth < 768;

       $('#main_ad > .carousel-inner > .item').each(function (i, item) {

           var $item = $(item);

           $item.css("backgroundImage", 'url("'+$item.data(isSmallScreen ? "image-xs" : "image-lg")+'")');

           if(isSmallScreen){

               $item.html("<img src='"+$item.data(isSmallScreen ? "image-xs" : "image-lg")+"' alt=''/>");

           }else {

               $item.empty();

           }

       });

   }

   $(window).on('resize', resize).trigger('resize');

});

window resize事件

- 由于上一步我们实现的过程是指在页面加载完成判断一次，

- 当用户手动调整页面宽度过后没有及时发生变化，

- 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题

function 窗口变化后执行的函数名(){

  // 具体的操作

}

$(window).on('resize', 窗口变化后执行的函数名);

这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次

$(window).on('resize', 窗口变化后执行的函数名).trigger('resize');

小图片不需要使用背景的方式

小图如果还是使用背景的方式，当屏幕特别小时，效果很差

所以当使用小图时，改用img的方式

// 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式

if (isSmallScreen) {

  $item.html('<img src="' + imgSrc + '" alt="" />');

} else {

  $item.empty();

}

按照目前的情况，如果是小图展示则不需要给容器加上410px的固定高度

所以我们可以通过CSS媒体查询的方式解决

#main_ad > .carousel-inner > .item {

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}

@media (min-width: 768px) {

  #main_ad > .carousel-inner > .item {

    height: 410px;

  }

}

#main_ad > .carousel-inner > .item > img {

  width: 100%;

}