Bootstrap Carousel大小相同的圖像（異常偏移量）

Question

我在javascript中遇到異常，我知道這是由於圖像大小所致。

我希望輪播的圖像大小固定，並自動調整/調整圖像大小（如果圖像變形或像素化，這不是問題，我只希望整個圖像占據輪播的大小。

我一直在玩max-width和width，但無法正常工作。 我也想對此有所回應。

這是我的html代碼：

<div id="myCarousel" style="display: block;" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators" id="carouselIndicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    </ol>

    <div class="carousel-inner" id="carouselData" role="listbox">
      <div class="item active">
          <h3>Random text 1</h3>
          <p>Random text 2</p>
          <img src="imageurl.png" alt="">
       </div>
        <div class="item">
              <h3>Random text 3</h3>
              <p>Random text 4</p>
              <img class="tales" src="imagelink.png" alt="">
      </div>
    </div>

    <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>

這是javascript異常（滑塊不起作用）：

未捕獲的TypeError：無法讀取未定義的屬性'offsetWidth'

Answer 1

試試這個與寬度和高度和jQuery的

  <div class="container">
  <h2> Carousel </h2>
  <div id="myCarousel" class="carousel slide">

  <ol class="carousel-indicators">
  <li class="item1 "></li>
  <li class="item2"></li>

  </ol>
   <div class="carousel-inner" role="listbox">

  <div class="item active">
    <img src="l.jpg" alt="test" width="400" height="300">
    <div class="carousel-caption">
      <h3>Header</h3>
      <p>kkk</p>
    </div>
   </div>

  <div class="item">
    <img src="l.jpg" alt="test" width="400" height="300">
    <div class="carousel-caption">
      <h3>Header</h3>
      <p>kk</p>
    </div>
  </div>

</div>

 <!--  controls -->
<a class="left carousel-control" href="#myCarousel" role="button">
  <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">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
 </div>
 </div>

並添加一些jQuery

<script>
 $(document).ready(function(){
//  Carousel
$("#myCarousel").carousel();

//  Carousel Indicators
$(".item1").click(function(){
    $("#myCarousel").carousel(0);
});
$(".item2").click(function(){
    $("#myCarousel").carousel(1);
});


//  Controls
$(".left").click(function(){
    $("#myCarousel").carousel("prev");
});
$(".right").click(function(){
    $("#myCarousel").carousel("next");
});
 });
  </script>

Answer 2

感謝大家！ 我終於修好了。

使用以下CSS樣式：

 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
     display: block;
     width:100%;
     height: 350px !important;
 }

我的引導輪播現在具有固定的高度，然后始終調整圖像大小以匹配輪播的總寬度。