用Bootstrap寫響應式banner長條圖

需求：1、需要實現響應式，在各種手機瀏覽器和在PC上正常顯示；2、長條圖圖片響應式，手機上和PC上分別使用不同大小的長條圖。

分析：首先要讓長條圖居中自適應，有兩種方式，①讓長條圖作為div的背景圖，自適應；②將長條圖banner以<img>插入div中，自適應；

 

我們一步一步的完成：

step1:這里我們先使用背景圖的方式處理

<div id="header"></div>

#header{
  height: 350px;
  background-image: url('../images/[e-mail]');
  background-position: center center; // 讓背景居中垂直水平居中顯示
  background-repeat: no-repeat;
  background-size: cover; // 按照較小邊對圖片進行縮放
}

單現在的問題是當屏幕寬度縮放到移動設備的時候banner的內容展示不全，我們希望當我們縮小到快要展示不全時使用banner小圖進行展示。這就需要使用圖片響應式。

step2:使用圖片響應式，我們不能在background-image: url()中將圖片寫死，需要讓JS去判斷該使用什么圖片，並且將圖片src作為data屬性的值從html中傳遞給js。

<div id="header" data-image-lg="images/[e-mail]" data-image-sm="images/[e-mail]"></div>

#header{
  height: 350px;
  // background-image: url('../images/[e-mail]');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

js:

$(document).ready(function(){
  resize();
  $(window).on('resize', resize);
})

function resize() {
  //屏幕寬度發生變化改變banner
  var windowWidth = $(window).width();
  var isSmall = windowWidth < 840; //當前屏幕寬度是否小於840px
  var imgSrc = isSmall ? $('#header').data('image-sm') : $('#header').data('image-lg')
  $('#header').css('backgroundImage', 'url('+imgSrc+')');
}

但是現在還是有點小問題，在屏幕寬度小於840px時候，背景圖確實會變成小圖，我們繼續縮小發現有一部分想要的內容還是沒法看見，如下圖：

我們希望的情況是當我們再縮小時，圖片高度和寬度都可以按照視口大小縮放。這顯然用背景圖的方式就沒法完成，思路是當小於840px我們使用<img>的方式。

step3:修改下我們的js代碼和css代碼

$(document).ready(function(){
  resize();
  $(window).on('resize', resize);
})

function resize() {
  //屏幕寬度發生變化改變banner
  var windowWidth = $(window).width();
  var isSmall = windowWidth < 840;
  var imgSrc = isSmall ? $('#header').data('image-sm') : $('#header').data('image-lg')
  $('#header').css('backgroundImage', 'url('+imgSrc+')');

  if (isSmall) { // 小於840px使用img元素添加banner
      $('#header').html('<img src="'+imgSrc+'">')
  } else {
      $('#header').empty();
  }
}

#header{
  background: #f0f0f0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/** 如果屏幕大於840px才設置header的高度，小於讓圖片撐開 **/
@media (min-width: 840px) {
  #header{
    height: 350px;
  }
}
/** 設置img banner的寬度100% **/
#header > img{
  width: 100%;
}

完成，效果和素材可以在github下載查看：https://github.com/MesopotamiazZ/shenma