Question

我在javascript中遇到异常，我知道这是因为图片大小..

我希望我的旋转木马具有固定尺寸的图像，并自动调整/调整图像大小（如果它变形或像素化不是问题，我只想要整个图像占据旋转木马的大小。< / p>

我一直在玩最大宽度和宽度并且无法使其正常工作。我希望这也能做出回应。

这是我的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：无法读取属性＆＃39; offsetWidth＆＃39;未定义的

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

谢谢大家！我把它固定在finnaly。

使用以下CSS样式：

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

我的自举旋转木马现在有一个固定的高度，然后图像总是调整大小以匹配旋转木马的总宽度。

Bootstrap Carousel相同的图像大小（异常偏移）

2 个答案: