COMO AJUSTAR O TAMANHO DA IMAGEM AUTOMATICAMENTE NO HTML CURSO HTMLCSSJS
646Nessa video aula mostro a vocês como podemos ajustar o tamanho da nossa imagem automaticamente no nosso HTML utilizando alguns conceitos de CSS.
Eae vamos ajustar imagem automaticamente?
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.
Para exibir uma foto 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.
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.
Por exemplo, se quisermos que nossa imagem 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%"
Credito do Texto: https://www.htmlprogressivo.net/2013/10/Atributos-height-width-tag-img-Como-mudar-a-altura-e-largura-de-uma-imagem.html
Eae pessoal, ficou alguma duvida? Deixe nos comentários que estarei respondendo.
Canal da Twitch: https://www.twitch.tv/evenusfi
📥 Me envie sua dúvida pelo Instagram: https://www.instagram.com/digitali.zando
📹 Se inscreva no canal
→ https://www.youtube.com/c/EvenusFi
📡 Siga a gente nas Redes Sociais
→ https://evertonfigueiredo.com.br/bio/
📸Instagram
→ https://www.instagram.com/digitali.zando
💻 Edição e Áudio: Digitalizando
🔗 Um vídeo do projeto Digitalizando