所有 img 都应该是 100% 的基本 Bootstrap 设置吗？答案

【问题标题】：Are all img supposed to be 100% with basic Bootstrap setup?所有 img 都应该是 100% 的基本 Bootstrap 设置吗？
【发布时间】：2014-02-03 01:24:02
【问题描述】：

我正在使用bootstrap 3.0.3 创建一个站点，并在标题中实现了引导轮播。

这几天我一直在敲打页面，这些页面似乎可以正常工作而没有问题，然后我发现了一些不寻常的东西。页面上的所有图像都在某一时刻达到 100%。

我没有将它们放在网格上，因此在我看来这是正常/默认行为。现在它们都以精确的尺寸显示。当我的浏览器完全展开时，这当然会影响我的英雄/轮播图像，因为它们现在在右侧显示有一些灰色空间，但是，当我减小窗口大小时，它们会调整大小并填充页面。

我通过下载一个新的引导程序副本并创建一个新的 html 文件（下面提供的代码）然后从引导程序网站添加轮播模板代码并放置我正在使用的图像来解决这个问题。这样做之后，当我的浏览器打开到最大宽度时，图像仍然没有流到边缘。

我以前从未遇到过 bootstrap 或 carousel 的问题，所以我完全被难住了。 img 的默认宽度不是 100%，因为它看起来确实像在 bootstrap.css 文件中。此外，我已将img width:100% !important 添加到我的文档的head 中，并且一切都恢复到发生此问题之前的状态。

我想知道这是否只是最近所做的更改，当我更新引导程序时它改变了一切？如果是这样，轮播是否不应该将图像拉伸到边缘？

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
        <!-- Carousel -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/hero-1.jpg" alt="First slide">
                    <div class="container">
                        <div class="carousel-caption"></div>
                    </div>
                </div>
                <div class="item">
                    <img src="img/hero-2.jpg" alt="Second slide">
                    <div class="container">
                        <div class="carousel-caption"></div>
                    </div>
                </div>
                <div class="item">
                    <img src="img/hero-3.jpg" alt="Third slide">
                    <div class="container">
                        <div class="carousel-caption"></div>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <!-- JavaScript -->
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

【问题讨论】：

您是否检查过包含 img 的父级应用的 css 属性？也许某些东西有不同的宽度属性？
我检查了 div 主体选择器上的属性，发现没有冲突的大小属性。我使用了 BS 2.3，我的轮播图像可以响应式显示，而无需提供更大的图像。现在在 3.0.3 中，它似乎在响应拉伸，直到达到图像的长度（1578 像素）。我正在处理的代码只是对我使用 bootstrap 2.3.0 构建的站点的大修。该站点存在于网络上，并且正在使用完全相同的图像。我什至从我现有的站点中获取了代码，并将其与更新版本的引导程序一起使用，它出现了这个问题。
另外要注意的是，我发现 3.0.3 取消了响应式 css，现在有了一个 img-reponsive 类。我在上面的测试代码中应用了这个，它解决了这个问题。我将它应用于我的主文件，问题仍然存在。 :(
刮掉最后一个音符。我将宽度设置为 100%。它没有解决我的问题。双 :(

标签： html css twitter-bootstrap responsive-design carousel

【解决方案1】：

BS3 实现响应式图像的方式与 BS2 不同。响应式图像被分配给 img 元素的 .img-responsive 类。出于某种原因，Twitter 的人们认为这是个好主意，但我不知道为什么。

不幸的是，这往往是太多的工作，并违背了使用响应式框架的目的。对于每个 BS3 项目，我只需添加...

img { max-width:100%; height:auto; }

... 在我的样式表的顶部。这使得所有图像都将其容器填充到它们的原始分辨率。因此，如果图像宽度小于其所在的容器宽度，则其大小不会超出其原始尺寸。

希望这会有所帮助。

【讨论】：