Como Definir a Largura e Altura de uma Imagem Usando HTML

Este artigo vai ensiná-lo a definir a largura e altura de uma imagem usando a linguagem de programação HTML (Hypertext Markup Language - Linguagem de Marcação de Hipertexto).

O atributo "width" especifica a largura de uma imagem, em pixels.
O atributo "height " especifica a altura de uma imagem, em pixels.
No HTML 4.01, a altura pode ser definida em pixels ou em % do elemento que a contém. No HTML5, o valor deve ser definido em pixels.

Passos

Baixe em PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

padrão.html).
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Adicione a seguinte linha ao seu script:
- <img src="imagefile.jpg" alt="Image" height="42" width="42">
- src é o caminho do arquivo da imagem.
- alt é a tag que você dá à imagem.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

height="19" width="20"
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

O atributo "width" é suportado na maioria dos navegadores de internet, como Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer etc.

Publicidade

Dicas

Sempre especifique a altura e largura da imagem. Ao fazê-lo, o espaço necessário para a imagem será reservado quando a página for carregada. No entanto, sem esses atributos, o navegador de internet não saberá o tamanho da imagem e não vai conseguir reservar o espaço necessário para ela. Como resultado, o layout da página será alterado durante seu carregamento (enquanto a imagem é carregada).
Reduzir o tamanho de uma imagem grande com os atributos de largura e altura força o usuário a baixá-la em um tamanho maior (mesmo ela aparentando ser menor na página). Para evitar que isso aconteça, redimensione a imagem com um programa antes de enviá-la à página.

Autenticar-se

Como Definir a Largura e Altura de uma Imagem Usando HTML

Passos

Dicas

WikiHows Relacionados

Referências

Sobre este guia wikiHow

Este artigo foi útil?

Artigos Relacionados

Inscreva-se na Newsletter Gratuita do wikiHow!

Siga-nos

Compartilhar

Explore Categories