Estou usando a classe "img-responsive", mas, mesmo assim, a primeira imagem tem um tamanho diferente das restantes. Alguém pode me dizer por que?
<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>