tag <img>

Definir os atributos width e height nas tags <img> ajuda a evitar mudanças de layout. Essas informações permitem que o navegador reserve a quantidade correta de espaço para a imagem.

  • Defina os atributos width e height:os valores desses atributos precisam ser definidos para corresponder às dimensões da própria imagem (ou seja, ao tamanho intrínseco), e não às dimensões em que a imagem será exibida.

  • Ajuste o estilo da imagem conforme necessário:dependendo do estilo atual da imagem, adicionar os atributos width e height pode fazer com que a imagem seja renderizada de maneira diferente. Em muitos casos, isso pode ser corrigido adicionando height: auto ou width: auto ao estilo atual.

Estilo CSS anterior Alterar para
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">