Bootstrap 3-一些圖像調整大小，另一些則沒有

Question

我正在使用Bootstrap 3，正如您在代碼中看到的那樣，我有兩個圖像。 他們兩個都有“ .img-響應”類，所以我不知道為什么只有第一個調整大小，而第二個總是相同大小。

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”；

Answer 1

當您將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;">

Answer 2

那是因為您在兩者中都使用了不同的內聯樣式width和height ，所以請嘗試刪除內聯樣式，因為這會阻止img-responsive類適用。

第一張img：

<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：

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

希望對您有所幫助。 看看工作小提琴 。