tag <img>
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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">
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2024-03-13 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2024-03-13 UTC."],[],[]]