COMO AJUSTAR O TAMANHO DA IMAGEM AUTOMATICAMENTE NO HTML CURSO HTMLCSSJS
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- Nessa video aula mostro a vocês como podemos ajustar o tamanho da nossa imagem automaticamente no nosso HTML utilizando alguns conceitos de CSS.
🚀 Está com dificuldades para estudar ou desenvolver um projeto? Sou professor de Desenvolvimento de Sistemas e quero te ajudar!
Preencha o formulário:
→ evertonfigueir...
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: www.htmlprogre...
Eae pessoal, ficou alguma duvida? Deixe nos comentários que estarei respondendo.
Link do Nosso Discord
/ discord
📹 Se inscreva no canal
→ / @evertondev
💲 Quer ajudar o canal? Faz um PIX:
→ jose.everton.f@hotmail.com
📸Instagram
→ / evertondev
💻 Edição e Áudio: Digitalizando
🔗 Um vídeo do projeto Digitalizando
🚀 Está com dificuldades para estudar ou desenvolver um projeto? Sou professor de Desenvolvimento de Sistemas e quero te ajudar!
Preencha o formulário:
→ evertonfigueiredo.com.br/proposta.html
Cara, tenho certeza que tu salvou muitas vidas além da minha. Só com esse vídeo... Thank you very much. Demais mano.
Eu estava presa em um problema e fazia horas, pesquisava e não achava nada. Seu vídeo foi o único que me ajudou e ainda deu uma solução rápida. Muito Obrigada!!
Sucesso!!
Meu deus, como eu não sabia dessa propriedade meu rei!! MUITO OBRIGADO, SERIO, VOCÊ MERECE TODOS OS LIKES POSSIVEIS
Video muito bom pprt!! me salvou muito
OBRIGADO AMIGO VOCE E UM AMIGO! eu ja tave perdendo o juizo de ter que ficar redimensionando no gimp
Muito obrigado. a função object-fit:cover me ajudou muito!
Salvou D++++++ TMJ
Tutorial top, me ajudou com minha dificuldade.
cara, você é um cara foda!!!
ajudou muito, não tava conseguindo pelo css não sei pq, obrigada
Cara você e sensacional continue com seu trabalho obrigado!!!
Vou continuar assim que der. Muito trabalho por aqui e pouco tempo rsrs.
Ótimo
Incrível demais, me ajudou muito
Que bom que ajudou. :D
Devia ter um canal que mostrasse os possíveis erros pois o que mais acho na internet é videos explicando como colocar imagem e tudo dando certinho e a segunda coisa é gente perguntando porque minha imagem não reduziu ou não aumentou de tamanho.
Existi um numero finito de erros, porém fica complicado gravar muitos deles, nos meus vídeos que faço, geralmente sem corte sempre acontece um erro ou outro que explico como resolver, fora isso se precisar de ajuda só mandar um comentário aqui que a gente se ajuda.
@@evertondev Beleza, obrigado pela resposta. Eu notei que muitas pessoas esquecem do atributo src e então não conseguem formatar.
Me ajudou demais! Gratidão
Fico feliz
Bom demais em mano!
Muito obrigado ✌, se tiver alguma duvida só deixar nos comentários.
nossa me salvou,obrigadaaaa
Disponha!
bom video amigo, da próxima explora mais o object-fit, tem alguns valores legais também para usar nele, graças a seu video, me fez lembrar dele para o que eu precisava...
Ótima dica
Coloco a div certinha, vou lá no css e defino a altura e a largura, mas simplesmente não aplica, a imagem continua gigantesca na tela. Olho se escrevi certo, mudo a ordem, mudo o nome da class, e nada resolve. Às vezes é só pra estressar a gente mesmo...
Amigo, as vezes pode ser uma coisa chamada cache, me chama no Instagram qualquer coisa que eu vejo o erro, @Evertondev
boa noite , queria saber oq faço , meu vs code n aparece o codigo width e height , sendo assim n consigo alterar nada
Verifique se está abrindo as { certinho, e se está exatamente como mostro, mesmo não aparecendo a autocompletar funciona, as vezes é só questão de configuração, cmg quando não aparece eu aperto ctrl+barra de espaço, aí aparece.
Bom dia mestre, como faz para dar o cover do objective fit no pé da imagem por ex?
Junto com object-fit você pode usar o object-position para alinhar ela.
Segue link de exemplo
developer.mozilla.org/en-US/docs/Web/CSS/object-position
Essa consegui pegar ao vivo. #HTML #CSS #JAVASCRIPT
Eae mano, vlw pela participação.
@@evertondev sempre mano 🙏
Esse comando ficou excelente para o mobile, mas no desktop ele aumentou demais a imagem, tem como melhorar isso?
você pode seta o tamanho máximo.
Amigo estou com uma logo no header que quando diminui o vh as letras passam por cima dela ou seja ela a imagem fica estática , já fiz de tudo tem alguma dica?
Se estiver usando algum framework veja o sistema de grid, sem framework utilize um display: inline; ou display: block;
medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-block-98480c987950
Esse link vai ajudar se ainda tiver duvidas.
Valeu
Precisando só falar.
@@evertondev Com certeza 👍😂
Pergunta estranha: esse código também pode funcionar em um vídeo mp4?? .-.
Neste caso é melhor você adicionar uma classe adicionando 100% e 100%, a atribuir uma div, ai você controla o tamanho da div, por consequência o tamanho do video,.
obrigado!
Nós que agradecemos!
Como faz para por de fundo man
utiliza a função background do css
Entendi nada, rs não sei como chegar nessa tela.
É bom da uma revisada em como instalar o vscode por exemplo.