0

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

2 Respostas 2

1

.img-responsive Makes an image responsive (will scale nicely to the parent element)

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

Isso não significa que as imagens irão ficar com o mesmo tamanho. Se tu quer imagens com largura e altura igual ou precisa ter todas nas mesmas dimensões, ou esticar/estourar algum dos lados...

Se tu definir a altura padrão, a largura vai ser definida de forma proporcional a largura original da imagem, essa é a forma certa, sem distorcer nada. O mesmo serve pra largura padrão com altura proporcional.

Tu ainda pode ter todas no mesmo tamanho sem esticar/estourar, vai ter que deixar um pedaço da imagem pra fora do teu quadro de desenho. (div, canvas, elemento q tu tiver desenhando) (=

1

Veja se tem alguma css no "id= "cao1"

Mais eu verifiquei isso:=2048x2048 no final da imagem, isso define o tamanho dela.

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

Exemplo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .