Curso Web Design - Aula 14 - Trabalhando com Altura e Largura de Imagens no HTML
Olá pessoal, blz?
Nesta aula vamos aprender como trabalhar com altura, largura e proporções de tamanhos com a tag img do HTML.
Na última aula aprendemos como trabalhar inserir uma imagem em nosso site, como colocar uma palavra alternnativa caso a imagem não abrir no Browser e a como inserir um titulo para imagem, mas faltou falarmos que a tag img possui atributos de largura e altura, aonde você pode manipular as imagens de acordo com a sua nescessidade, sem precisar utilizar softwares de edição de imagens.
Veja como trabalhar a Largura e Altura de imagens no HTML.
<img src="sua_imagem.jpg" alt="minha imagem" title="seu titulo" width="100" height="100" />
Vamos as explicações.
Com atributo widht você define a largura e com o height a altura da imagem, o atributo width e height trabalha com pixels ou porcentagem, no exemploacima utilizando o pixel, veja abaixo com utiliza-lo com porcentagem.
<img src="sua_imagem.jpg" alt="minha imagem" title="seu titulo" width="50%" height="50%" />
Desta forma, se você utilizar porcentagem o HTML irá calcular qual a largura e altura do seu monitor, e fará com essa fique 50% redimencionada ao tamanho da sua tela ou seja, a imagem ficará proporcional a 50% do tamanho do seu monitor.
Ainda em cima de proporções, uma última dica sobre a tag img é que ela também calcula a proporção de uma se definido apenas um atributo, então suponhamos que eu queira colocar apenas a altura na minha imagem, o HTML automaticamente irá definir uma largura ideal e proporcional ao tamanho que você definiu de altura. Mesma coisa para a largura, se você definir apenas a largura da imagem, o HTML irá detectar automaticamente a altura proporcional da imagem.
Vejam a vídeo aula e entenda melhor como trabalhar com os atributos width e height no HTML.
Gostou? Então compartilhe! |
