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

【问题标题】：Bootstrap Carousel same image size (Exception offset)Bootstrap Carousel 相同的图像大小（异常偏移）
【发布时间】：2017-01-27 19:32:37
【问题描述】：

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

我希望我的轮播具有固定的图像大小，并自动调整/调整图像大小（如果图像失真或像素化这不是问题，我只希望整个图像占据轮播的大小。

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

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

未捕获的类型错误：无法读取未定义的属性“offsetWidth”

【问题讨论】：

你能显示javascript吗？
哪一个？我没有为此使用任何 javascript 文件，只是内置在 bootstrap.min.css
这可能只是引导程序的问题。我找不到任何东西，也许其他人可以。
谢谢，顺便问一下，你知道如何使用这个html将图像调整为相同大小吗？我从其他答案中尝试了一些东西，但都没有奏效......也许我做错了什么。感谢您的输入
你可以试试绝对位置(position:absolute;)。您是否还尝试使用百分比而不是像素或其他什么？

标签： javascript css image twitter-bootstrap autoresize

【解决方案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>

【讨论】：

【解决方案2】：

谢谢大家！我终于修好了。

使用以下 CSS 样式：

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

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

【讨论】：