Question

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>

    <div class="item col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>

    <div class="item col-xs-12">
      <img src="big1.jpg" class="img-responsive" alt="...">
    </div>
</div>

我试图搜索，但没有解决我的问题。我不想使用display：table，因为我在类似的问题中读到。任何帮助将非常感激。

Answer 1

将bootstrap.css中的.img-responsive更改为以下内容：

.img-responsive {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

由于某种原因，添加宽度：100％混合使img-responsive起作用。它也适用于Firefox和Chrome。

并试试这个：

.item img {
  width:100%;
}

Answer 2

在CSS文件中添加此行以解决问题：

.img-responsive{ width:100% !Important;}

Answer 3

为了保持您的图像响应，您最好使用

img{
  max-width: 100%
}

根据你的评论，似乎这个css被其他一些css覆盖了，所以你可以在这里使用css特性，如下所示

img, .container img.img-responsive{
  max-width: 100%;
}

这会将你的img保持在你的屏幕尺寸内，这是我们用来保持图像响应的常用技术

Answer 4

在图片中设置width属性。

<img src="http://placehold.it/1920x1080" alt="Carousel image" class="img-responsive" width="100%" />

注意：width="100%"并非W3C有效。但它的工作几乎都是现代或旧浏览器。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
    <div class="item">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
    <div class="item">
      <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" />
    </div>
  </div>
</div>

＆＃13;

你可以试试这个。

Answer 5

我找到了答案，我已经尝试了所有解决方案，但是 col-xs-12 col-md-10 col-md-offset-1对我有用，所以我将col-md-10 col-md-offset-1添加到我以前的标记中。

Bootstrap img-responsive不起作用，图片仍然比屏幕长

5 个答案: