Como Definir a Largura e Altura de uma Imagem Usando HTML

Baixe em PDF
Baixe em PDF

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
  1. {"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).
  2. {"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>"}
    • <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • src é o caminho do arquivo da imagem.
    • alt é a tag que você dá à imagem.
  3. {"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"
  4. {"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.
Publicidade

WikiHows Relacionados

Como
Inserir Espaços no HTML
Como
Ativar o WebGL
Como
Configurar Cores de Fundo em HTML
Como
Mudar a Cor do Texto em HTML
Como
Centralizar uma Imagem em HTML
Como
Criar uma Wiki
Como
Centralizar Texto no HTML
Como
Alterar a Cor de um Botão em HTML
Como
Inserir Imagens Usando HTML
Como
Criar um Site ou Blog com Estética dos Anos 1990
Como
Definir um Plano de Fundo em HTML
Como
Abrir Arquivos HTML
Como
Executar um Servidor Web em Seu Computador
Como
Instalar o XAMPP para Windows
Publicidade

Referências

  1. http://www.w3schools.com/ – Encontre todas as informações sobre HTMl nesta página.

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 109 161 vezes.

Este artigo foi útil?

Publicidade