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%;
}

目的

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

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

实现方式

给标签添加两个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%;
}