I’m not able to leave the images in the same size using bootstrap

Question

I am using the "img-Responsive" class, but even so, the first image has a different size than the rest. Can anyone tell me why?

<div class="col-md-3">
    <h2>Sub heading</h2>
    <img  id= "cao1" class="img-responsive" src="http://media.istockphoto.com/photos/montreal-skyline-in-autumn-picture-id97853919?s=2048x2048" alt="city1">
    <p>some text here</p>
</div>
<div class="col-md-3">
    <h2>Sub heading</h2>
    <img  class="img-responsive" src="http://media.istockphoto.com/photos/makati-city-picture-id458077667" alt="city2">
    <p>some text here</p>
</div>
<div class="col-md-3">
    <h2>Sub heading</h2>
    <img class="img-responsive" src="http://media.istockphoto.com/photos/san-francisco-alamo-square-postcard-row-houses-downtown-skyscraper-picture-id176088084" alt="city3">
    <p>some text here</p>
</div>
<div class="col-md-3">
    <h2>Sub heading</h2>
    <img  class="img-responsive" src="http://media.istockphoto.com/photos/new-york-city-skyline-picture-id108178892" alt="city4">
    <p>some text here</p>
</div>

Answer 1

.img-Responsive Makes an image Responsive (will Scale Nicely to the Parent element)

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

This does not mean that the images will be the same size. If you want images with equal width and height or need to have all the same dimensions, or stretch/pop any of the sides...

If you set the standard height, the width will be set proportionally to the original width of the image, this is the right shape, without distorting anything. Same for standard width with proportional height.

You can still have them all the same size without stretching/popping, you’ll have to leave a piece of the image out of your drawing board. (div, canvas, element you have drawing) (=

Answer 2

See if you have any css in "id= "Cao1"

Plus I checked this:=2048x2048 at the end of the image, this sets the size of it.

<div class="col-md-3">

            <h2>Sub heading</h2>
            <img  id= "cao1" class="img-responsive" src="http://media.istockphoto.com/photos/montreal-skyline-in-autumn-picture-id97853919?s=2048x2048" alt="city1" >
            <p>some text here</p>
</div>

Example:

  <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">