Como mudar a altura e largura de uma imagem - Os atributos height e width da tag < img >

No tutorial passado de nosso curso de HTML, mostramos como colocar fotos e imagens em um site através da tag img e começamos a ver como nossos websites estavam cada vez mais bonitos e interessantes.

Neste tutorial da apostila, vamos continuar trabalhando em cima das imagens, aprendendo a mudar seu tamanho e largura.

height e width - Por que mudar a altura e largura de uma imagem ?

Se notar bem, no artigo passado quando usamos duas imagens (dois logotipos, do Google e do PHP) e os exibimos em nosso site, o tamanho das imagens que apareceram eram os tamanhos originais.

Isso ocorreu porque não especificamos nada na tag img, apenas sua fonte (src), então o navegador foi lá e carregou a foto no seu site, exatamente do jeito que ela era.

Porém, a função do HTML é, basicamente, formatar e decidir a maneira como as coisas são exibidas em um site. E uma das coisas que podemos comandar é a imagem, seu tamanho, altura e onde vai ficar dentro de um site (veremos isso depois).

Imagine que você criou um portal de notícias da sua cidade.
Na página principal vai exibir só as chamadas das notícias, que são compostas por um breve resumo e uma pequena imagem da notícia (acesse sites como o da Globo, Terra ou UOL e verá como funciona).

E quando a pessoa clicar na notícia, ela verá dentro da página uma foto bem maior que aquela vista na home, que era uma espécie de miniatura.
Só com o conhecimento que temos da tag img, teríamos que criar dois arquivos de imagem diferentes: um com a foto original, bem grande, que será exibida na página da notícia e outra imagem com tamanho menor, exibida na index de seu website.

Ora, imagine a trabalheira que isso dá? Pegar a foto e usar um editor de imagens, como Paint ou Photoshop para editar o tamanho de cada figura.

Por isso é importante que você conheça e saiba usar os atributos height e width, da tag img, pois com eles você poderá editar e escolher o tamanho de qualquer imagem.

Como usar os atributos height e width

heigh, em inglês, significa altura.
E width, como é de se esperar, significa largura.
E essas duas palavrinhas em inglês são também os atributos que iremos usar na tag img para poder definir a altura e largura de qualquer imagem.

A sintaxe desses atributos é:
<img src="URL_DA_IMAGEM.extensao" height="numero_altura" width="numero_largura>

Vamos, agora, usar tanto a altura como largura em pixels.
Por exemplo, a imagem "HTML-Progressivo.png a seguir tem 388 pixels de largura e 66 pixels de altura:
Curso de HTML online grátis

Para exibir essa mensagem com 300 pixels de largura e 50 de altura, usamos a tag img da seguinte maneira:
<img src="HTML-Progressivo.png" height="50" width="300">

E a ordem dos atributos height e width não importa! Poderíamos ter feito:
<img src="HTML-Progressivo.png" width="300" height="50">


Mesmo que, em algumas ocasiões, você vá querer usar a imagem com seu tamanho original (podendo portanto não fornecer nenhum dos atributos height ou width), recomenda-se usar tais atributos de tamanho.

O motivo disso é que ao definir a altura e largura de uma figura em seu site, aquele espaço na página ficará já reservado para a figura. Assim, enquanto o browser acessa a imagem ela é carrega em sua posição, evitando que texto e outros elementos fiquem mudando de posição à medida que uma nova imagem é carregada.



Exercício com imagens em HTML

Crie um site em HTML que exiba a imagem seguinte (PHP-logo.png) com seu tamanho original e abaixo dela a mesma imagem, porém com o dobro do tamanho (altura e largura).
Apostila de HTML completa para download

Para saber os tamanhos originais da imagem, basta clicar com o botão direito em cima dela e ir em propriedades que lá deverá ter as informações.
Na imagem do PHP vemos que ela tem 200 de largura e 106 pixels de altura (ou 200 x 106).

Para exibir a imagem em seu tamanho original, basta não fornecer nem height nem width, apenas fornecemos o endereço da imagem através do atributo src da tag img, assim como fizemos na aula passada.

Já para exibir a imagem com o dobro do tamanho, fazemos height=212  e width=400 dentro da tag img. Assim, nosso site que exibe ambas as imagens (original e com dobro do tamanho), possui o seguinte código HTML:

<!DOCTYPE html>
 
<html>

  <head>
      <title> Alterando altura e largura de uma imagem </title>
      <meta name="description" content="Como alterar a altura (height) e largura (width) de uma imagem">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
 
  <body>
      <h1> Imagem em tamanho orginal </h1>
      <img src="imagens/PHP-logo.png">
      <br /> <br />
      
      <h1> Imagem em tamanho dobrado </h1>
      <img src="imagens/PHP-logo.png" height="212" width="400">
  </body>

</html>


Cuidados com height e width

Devemos tomar alguns cuidados sempre que formos usar os tamanhos de uma imagem através dos atributos height e width. O principal deles, é a proporção entre a largura e a altura de uma imagem.

Por exemplo, se uma imagem tem os tamanhos 800x600 (altura x largura ou width x height), se reduzirmos ela à metade ficará com o tamanho 400x300.
Se dobrarmos, ficará 1600x1200.

E se fizéssemos ela ter 900x100 ? Ou 2112 x 1221 ?
Teste! Veja como fica a imagem: horrível! Parece que foi esticada para os lados ou cresceu.
Se vamos multiplicar a altura por um número (2 para dobrar e 0,5 para reduzir a metade, por exemplo), devemos multiplicar esse mesmo número na largura. Isso manterá sempre a proporção e não fará que sua imagem perca a qualidade.

Antigamente, todo mundo usava aqueles monitores enormes. Os computadores eram sempre compostos por esse monitor (que tinham + - a mesma resolução), uma CPU e um estabilizador, então não havia muito problema em manter as imagens em um tamanho e local fixo.

Porém, hoje em dia as coisas são muito flexíveis. Tem telas de tamanhos normais como de antes, como nos notebooks. Telas menores, como nos netbooks, sem falar nos mobile que são lançados de maneira bem frequente, como celulares, smartphones, iPad, iIsso, iAquilo etc.

Ou seja, é complicado definir um tamanho fixo de uma imagem, pois essa figura pode ficar bem em um browser e gigante em outro.

Veremos como resolver isso quando estudarmos CSS, onde poderemos criar sites bem dinâmicos e responsivos, que vão se adaptar à qualquer tipo de telas!

Mas, por hora, ainda estamos estudando o HTML e vamos aprender outra maneira de solucionar esse problema.

Definindo o tamanho de uma imagem através de porcentagem

Uma boa maneira para não se 'estressar' muito com o tamanho fixo das imagens é usar porcentagens.
Fazemos isso fornecendo um número em forma de porcentagem (1%, 10%, 100%, 200% etc) nos atributos height e width da tag img, ao invés de usar aqueles números que eram os pixels.

Por exemplo, se quisermos que nossa imagem do PHP ocupe todo o espaço visível, temos que usar 100%, então nossa tag img ficaria:
<img src="imagens/PHP-logo.png" height="100%" width="100%">

Faça um site com essa imagem!
A parte mais bacana vem agora: provavelmente seu browser está maximizado, então clique em restaurar (o mesmo botão de maximizar) e fique alterado o tamanho da janela do seu navegador.

Estique, encurte e faça mil coisas e veja o efeito super interessante: a imagem vai modificar seu tamanho para sempre ocupar 100%.

E se fosse 50%, metade da parte visível? Mesma coisa, não importa o tamanho da janela, ela ocupará sempre 50% da tela.

Exercício sobre tamanhos de imagem em porcentagem

Crie um site que exiba a figura do HTML Progressivo com 10% da área visível, 20% e 30%

O código HTML do site é:

<!DOCTYPE html>
 
<html>

  <head>
      <title> Alterando altura e largura de uma imagem em porcentagem </title>
      <meta name="description" content="Como alterar a altura (height) e largura (width) de uma imagem usando porcentagem">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
 
  <body>
      <h1> 10% da tela </h1>
      <img src="imagens/HTML-Progressivo.png" width="10%" height="10%"><br /><br />

      <h1> 20% da tela </h1>
      <img src="imagens/HTML-Progressivo.png" width="20%" height="20%"><br /><br />

      <h1> 30% da tela </h1>
      <img src="imagens/HTML-Progressivo.png" width="30%" height="30%">

  </body>

</html>

2 comentários:

Rafael disse...

Obrigado. Útil este artigo para eu formatar as imagens em meu site =)

Aline Laudelina Pires disse...

Qual comando permite rotacionar uma foto (mudar a orientação de paisagem para retrato)?