Bootstrap 3-一些图像调整大小，另一些则没有

Question

I'm using Bootstrap 3 and, as you see in the code, i have two images. Both of them have the ".img-responsive" class so i don't know why only the first one is resizing and the second one is always the same size.

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>

In case you're wondering, the id "img-center" only has "margin:0 auto" and "margin-bottom:45vh;

Answer 1

When you apply the width and height attributes to an element, it will override the width: 100% setting of .img-responsive .

However, the reason that the first image is responsive and the second is not, you did not append px to the end of the sizes for the first image. The browser would not know how to interpret that, so it would revert to the original width: 100%; setting.

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

To make both images responsive, you have to remove the fixed sizing attributes.

<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

That because you're using different inline-style width and height in the both of them, so try to remove the inline style because is prevent the class img-responsive to be applicable.

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

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

Hope this help. Take a look at Working Fiddle .