Bootstrap 3 - 一些图像调整大小，其他不答案

【问题标题】：Bootstrap 3 - some images resize, other don'tBootstrap 3 - 一些图像调整大小，其他不
【发布时间】：2015-10-16 09:11:04
【问题描述】：

我正在使用 Bootstrap 3，正如您在代码中看到的，我有两个图像。他们都有“.img-responsive”类，所以我不知道为什么只有第一个在调整大小而第二个总是相同的大小。

HTML：

<div class="container-fluid">
    <img src="img/ea.png" class="img-responsive" id="img-center" width="700" height="229">
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 frase">
            <p>LOREM IPSUM</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <a href="#">
        <img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;" width="80px" height="65px">
    </a>
</div>

如果您想知道，id "img-center" 只有 "margin:0 auto" 和 "margin-bottom:45vh;

【问题讨论】：

第二张图片有一个内联样式，它将覆盖引导响应样式。您可以为此图像使用额外的类并使用!important 覆盖内联样式。或者，如果可以删除内联样式。

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

【解决方案1】：

那是因为您在两者中使用了不同的内联样式 width 和 height，因此请尝试删除内联样式，因为这会阻止 img-responsive 类适用。

第一张图片：

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" id="img-center">

第二张图片：

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" style="margin:0 auto;" >

希望对您有所帮助。看一眼 Working Fiddle。

【讨论】：

【解决方案2】：

当您将width 和height 属性应用于元素时，它将覆盖.img-responsive 的width: 100% 设置。

但是，第一张图片是响应式的，而第二张不是，您没有将px 附加到第一张图片大小的末尾。浏览器不知道如何解释它，所以它会恢复到原来的width: 100%; 设置。

<img ... class="img-responsive" ... width="700" height="229">
<img ... class="img-responsive" ... width="80px" height="65px">

要使两个图像都具有响应性，您必须删除固定尺寸属性。

<img src="img/ea.png" class="img-responsive" id="img-center">
<img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;">

【讨论】：