Question

轮播图片自适应问题

参考地址如图一，改写如图二，实际运行效果如图三。碰到的问题是一：图片无法自适应，参数无法设置100%，只能设置数值。二：图片无法填充整个区域，上下均有空白。希望大神帮忙给看看哦，如果有更好的轮播源码，也可以提供下哦





Answer 1

• 当屏幕宽度大于等于768px时，图片使用大图，轮播图里的div高度固定，宽度为窗口的宽度(随窗口宽度的变化而变化)

• 当屏幕宽度小于768px（手机）时，将图片换为小图，并在div里生成img标签，img的宽高随窗口变化而变化，包裹img的div也随之变化

• html代码

<section id="main_ad" class="carousel slide" data-ride="carousel">
    <!-- 活动指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#main_ad" data-slide-to="0" class="active"></li>
      <li data-target="#main_ad" data-slide-to="1"></li>
      <li data-target="#main_ad" data-slide-to="2"></li>
      <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>
    <!-- 轮播项 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
      <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
    </div>
    <!-- 控制按钮 -->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </section>

css代码

#main_ad .carousel-inner .item{
    background-size: cover; /*让图片覆盖满整个div*/
    background-position: center,center; /*让图片在div里水平垂直居中*/
    background-repeat: no-repeat;
    height: 410px;
}
@media (max-width:768px) {
    #main_ad .carousel-inner .item {
        height: auto;
    }
    #main_ad .carousel-inner .item img{
        width: 100%;
    }
}

js代码

$(function() {
  /**
   * 根据屏幕宽度的变化决定轮播图片应该展示什么 5    */
  function resize() {
    // 获取屏幕宽度
    var windowWidth = $(window).width();
    // 判断屏幕属于大还是小
    var isSmallScreen = windowWidth < 768;
    // 根据大小为界面上的每一张轮播图设置背景
    $('#main_ad > .carousel-inner > .item').each(function(i, item) {
      var $item = $(item);
      // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
      var imgSrc =
        isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
      // 设置背景图片
      $item.css('backgroundImage', 'url("' + imgSrc + '")');
      //
      // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
      if (isSmallScreen) {
        $item.html('<img src="' + imgSrc + '" alt="" />');
      } else {
        $item.empty();
      }
    });
  }
  // // 让window对象立即触发一下resize，初始化div的背景图
  // $(window).trigger('resize');


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