Question

我需要为滑块设置一个可调整大小的背景

我尝试了background:url()和background-size:cover

$(window).resize(function() {
  $('.item > .image').css('height', $(window).height());
}).trigger('resize');

.image {
  background-size:contain;
background-position:center;
 background-repeat:no-repeat;
  background-image: url('data:img/png;base64,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');
}

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="image"></div>
    </div>
    <div class="item">
      <div class="image"></div>
    </div>
    <div class="item">
      <div class="image"></div>
    </div>
    <div class="item">
      <div class="image"></div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我需要自适应的背景图片以适合台式机和移动设备

Answer 1

.hero-section {
background-image: url('https://instapage.com/wp-content/uploads/2018/02/adwords-final-url-770x384.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 35vh;
width: auto;
}

<div class="hero-section"></div>

引导滑块响应式背景

1 个答案: