Propriedades height e width do elemento <img> do HTML
Exemplo
Defina a largura e a altura da imagem em 200 pixels:
<img src="/i/mouse.jpg" height="200" width="200" />
Definição e uso
A propriedade height e width do elemento <img> define o tamanho da imagem.
Dica:指定图像的 height e width é um bom hábito. Se esses atributos forem configurados, eles reservarão espaço para a imagem no momento da carga da página. Sem esses atributos, o navegador não saberá o tamanho da imagem e não pode reservar o espaço apropriado, então a layout da página mudará quando a imagem carregar. (A seguir, detalha essa visão).
Dica:Não use as propriedades height e width para ajustar o tamanho da imagem. Se você usar height e width para diminuir o tamanho da imagem, o usuário terá que baixar a imagem de grande capacidade (mesmo que a imagem pareça pequena na página). A prática correta é processar a imagem para o tamanho apropriado usando software antes de usá-la na página da web.
Leia mais:Explicação detalhada das propriedades height e width
Mais exemplos
Mudar o tamanho da imagem - Fazer preencher a imagem
As propriedades height e width têm uma característica oculta,那就是人们无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。
Outra técnica para usar as propriedades height e width é preencher facilmente uma área da página, ao mesmo tempo em que melhora o desempenho do documento. Imagine que você quer colocar uma barra colorida no documento. Você não precisa criar uma imagem com o tamanho completo, em vez disso, você só precisa criar uma imagem com largura e altura de 1 pixel e atribuir a cor que você deseja usar. Em seguida, use as propriedades height e width para expandi-la para um tamanho maior.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Este é o efeito daquele trecho de HTML, a barra de cores é feita com uma imagem de apenas um pixel:
Usar porcentagem
Uma técnica final para usar a propriedade width é substituir o valor absoluto em pixels por porcentagem. Isso fará com que o navegador escale a imagem em uma proporção específica em relação à janela de exibição do navegador. Portanto, para criar uma barra horizontal colorida com a mesma largura que a janela de exibição e uma altura de 30 pixels, você pode fazer assim:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Quando o tamanho da janela do documento muda, o tamanho dessa imagem também muda:
Dica:Se for fornecido um valor de width na forma de percentual e ignorado o height, tanto no aumento quanto na redução, o navegador manterá a proporção de largura e altura da imagem. Isso significa que a proporção entre a altura e a largura da imagem não mudará, e a imagem não ficará distorcida.
Veja o seguinte HTML:
<img src="/i/ct_1px.gif" width="20%" />
Isso é, se você definir apenas o valor percentual da largura do atributo width da imagem ct_1px.gif, você obterá uma imagem retangular (porque o ct_1px.gif original é um retângulo de 1px de largura e altura):
Dica:Você pode experimentar em nossa ferramenta de teste onlineExperimente você mesmo!
Dica:O objetivo de fornecer os exemplos acima é para que você entenda melhor o uso das propriedades height e width. Se você precisar apenas de grandes blocos de cor sólida para decorar a página, uma maneira melhor éUsar CSS para criar cor de fundo.
Suporte do navegador
Todos os navegadores suportam as propriedades height e width.
Sintaxe
<img height="value" />
ou:
<img width="value" />
Valor da propriedade
| Valor | Descrição |
|---|---|
| pixels | Valores de altura ou largura em pixels. |
| percent | Valores de altura ou largura em porcentagem do elemento contido. |
TIY Exemplo
- Ajustar o tamanho da imagem
- Este exemplo demonstra como ajustar o tamanho da imagem para diferentes dimensões.
Explicação detalhada das propriedades height e width
Por que usar as propriedades height e width
Você já viu o conteúdo do documento se movendo irregularmente ao carregar? Isso acontece porque o navegador precisa ajustar continuamente o layout da página para exibir cada imagem carregada. O navegador decide o tamanho da imagem baixando e analisando a largura e a altura da imagem, e então deixa um retângulo correspondente na janela de exibição. Em seguida, o navegador ajusta o layout da página para inserir a imagem. Isso também nos diz que as imagens são arquivos independentes, carregados separadamente do arquivo original.
Mas isso não é o método mais eficaz para exibir o documento, porque o navegador precisa verificar cada arquivo de imagem e calcular seu espaço na tela antes de exibir o conteúdo adjacentes e posteriores. Isso pode causar atrasos significativos na exibição do documento, interrompendo a leitura do usuário.
Para os criadores, um método mais eficaz é especificar o tamanho da imagem através das propriedades height e width do tag <img>. Dessa forma, o navegador reserva um espaço antes de baixar a imagem, o que pode acelerar a exibição do documento e evitar que o conteúdo do documento se mova. Ambas as propriedades precisam ser valores inteiros e representadas em pixels. A ordem de aparição dessas propriedades no tag <img> não importa.
Problemas com os atributos height e width
Embora os atributos height e width da etiqueta <img> possam melhorar o desempenho e permitir algumas técnicas, há alguns efeitos negativos complicados ao usá-los. Mesmo que o usuário tenha desligado a função de download automático de imagens, o navegador ainda exibirá o espaço reservado para a imagem com o tamanho especificado. Isso geralmente deixa para o leitor uma caixa vazia, com um ícone sem significado, indicando a posição onde a imagem deve estar. Isso faz com que a página pareça muito ruim, como se não estivesse completa, e a maioria do conteúdo é inútil. Se não usar os tamanhos especificados, o navegador simplesmente colocará um ícone de imagem no texto, pelo menos deixando alguma parte do texto legível.
Para esse problema ainda não temos uma solução, mas gostaríamos de destacar um ponto: use Atributo alte comTexto descritivoDesta forma, o leitor pelo menos saberá o que falta. Ainda assim, recomendamos que você use essas propriedades de tamanho, pois encorajamos qualquer coisa que possa melhorar o desempenho da web.
