Propriedade height do <img> do HTML
Definição e uso
altura propriedade que define a altura da imagem, em pixels.
Dica:Sempre especifique para a imagem altura e propriedade larguraSe definidas a largura e a altura, espaço necessário para a imagem será reservado no carregamento da página. Caso contrário, se essas propriedades não estiverem definidas, o navegador não saberá o tamanho da imagem e não será capaz de reservar espaço apropriado. Isso causará mudanças na disposição da página durante o carregamento (quando a imagem for carregada).
Dica:usar altura e largura Reduzir a imagem força o usuário a baixar a imagem grande (mesmo que pareça pequena na página). Para evitar isso, ajuste o tamanho da imagem com software de processamento de imagens antes de usá-la na página.
Exemplo
Uma imagem de 600 pixels de altura e 500 pixels de largura:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintaxe
<img height="pixels">
Valor do atributo
| Valor | Descrição |
|---|---|
| pixels | Definir a altura da imagem em pixels (por exemplo, height="100"). |
Mais exemplos
Mudar o tamanho da imagem - Criar imagem de preenchimento
A propriedade height e width têm uma característica oculta, que é que não é necessário especificar o tamanho real da imagem, ou seja, esses valores podem ser maiores ou menores que o tamanho real. O navegador ajustará automaticamente a imagem para que ela se adapte ao tamanho da área reservada. Com esse método, é fácil criar miniaturas de grandes imagens e ampliar imagens muito pequenas. Mas é importante notar: o navegador ainda tem que baixar o arquivo inteiro, independentemente do tamanho final que ele vai mostrar, e se não manter a proporção original de largura e altura, a imagem se deformará.
Outra técnica para usar as propriedades height e width é preencher facilmente uma área da página, melhorando ainda o desempenho do documento. Imagine que você quiser colocar uma barra colorida no documento. Você não precisa criar uma imagem com o tamanho completo, em vez disso, crie uma imagem com largura e altura de 1 pixel e atribua a cor que 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 do HTML acima, essa barra de cores é feita com uma imagem de apenas um pixel:
Usar porcentagens
A última dica para usar a propriedade width é substituir o valor absoluto em pixels por porcentagens. Isso fará com que o navegador escale a imagem em uma certa proporção em relação à janela de exibição do navegador. Portanto, para criar uma barra horizontal colorida com a largura da janela de exibição e uma altura de 30 pixels, pode-se 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 em forma de porcentagem e height for ignorado, tanto no aumento quanto na redução, o navegador manterá a proporção de largura e altura da imagem. Isso significa que a relação entre a altura e a largura da imagem não mudará, e a imagem não se deformará.
Por favor, veja o HTML abaixo:
<img src="/i/ct_1px.gif"} width="20%" />
Isso é, se você definir apenas o valor percentual do atributo width da imagem ct_1px.gif, você obterá uma imagem retangular (isso porque o ct_1px.gif original é um retângulo de 1px de largura e altura):
Dica:O propósito dos exemplos fornecidos é para que você compreenda melhor o uso dos atributos height e width. Se você precisa apenas de grandes blocos de cores puros para decorar a página, é melhorUse CSS para criar cores de fundo.
Explicação detalhada dos atributos height e width
Por que usar os atributos height e width
Você já viu o conteúdo da documentação se mover irregularmente ao carregar? Isso acontece porque o navegador se ajusta constantemente para exibir cada imagem carregada, ajustando a disposição da página. O navegador baixa e analisa a largura e a altura da imagem para determinar seu tamanho, e então deixa um retângulo correspondente na janela de exibição. Em seguida, o navegador ajusta a disposição 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, pois o navegador deve 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, uma maneira mais eficaz é especificar o tamanho da imagem através dos atributos height e width do <img> tag. Dessa forma, o navegador reserva um espaço para a imagem antes de baixá-la, o que pode acelerar a exibição do documento e evitar que o conteúdo do documento se mova. Ambos os atributos são valores inteiros e representam o tamanho da imagem em pixels. A ordem de aparição desses atributos no <img> tag não importa.
Problemas com os atributos height e width
Embora os atributos height e width do <img> possam melhorar o desempenho e permitir algumas técnicas, há alguns efeitos negativos complicados ao usá-los. Mesmo que os usuários tenham desligado a função de download automático de imagens, o navegador ainda exibirá o espaço reservado para as imagens 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 concluída, e a maioria do conteúdo é inútil. Se não usar os tamanhos especificados, o navegador apenas colocará um ícone de imagem no texto, pelo menos ainda há algo para ler.
Para esse problema ainda não temos uma solução, mas gostaríamos de enfatizar que é importante usar atributo alt eTexto descritivoDesta forma, o leitor pelo menos saberá o que falta aqui. Ainda assim, recomendamos que você use essas propriedades de tamanho, pois encorajamos todo comportamento que possa melhorar o desempenho da web.
Suporte ao navegador
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Suporte | Suporte | Suporte | Suporte | Suporte |
