Bootstrap 旋转木马相同的图像大小（异常偏移）

Question

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

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

我一直在玩最大宽度和宽度，但无法正常工作。我也希望它能响应。

这是我的 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异常（滑块不起作用）：

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

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

我的 bootstrap 轮播现在有一个固定的高度，然后图像总是调整大小以匹配轮播的总宽度。

Bootstrap 旋转木马相同的图像大小（异常偏移）

Bootstrap Carousel same image size (Exception offset)

javascript

css

image

autoresize

twitter-bootstrap