Carregando...

Imagens responsivas CSS

Media queries remodelaram o layout quando o viewport muda. Imagens são outro ponto de stress: um ficheiro de 4000px numa coluna estreita transborda, gasta banda ou faz a página saltar ao carregar. Esta lição cobre CSS fluido, reservar espaço e fontes mais inteligentes — sem repetir a sintaxe @media da sessão anterior.

Kit de imagens responsivas

📊 Imagens responsivas num relance

Peça Trabalho do dia a dia
max-width: 100% + height: auto A imagem encolhe na coluna; mantém proporção
width / height no <img> ou aspect-ratio em CSS Reserva espaço; menos CLS
srcset + sizes O browser escolhe largura de ficheiro perto do render
<picture> + <source media> Art direction — crop ou asset por condição
object-fit + caixa fixa Recorte ou letterbox em moldura conhecida (lição Object Fit)
Media queries no layout Movem colunas e nav — imagem segue largura do slot

Duas camadas: largura de layout e comportamento da imagem. Corrija overflow com CSS; adicione srcset quando o mesmo visual precisa de ficheiros menores no telemóvel.

Imagem fluida — max-width e height: auto

Imagem fluida numa coluna

css 
.article img {
max-width: 100%;
height: auto;
display: block;
}

Evite só width: 100% em imagens enormes sem max-width. Combine regras fluidas com srcset.

Reservar espaço — aspect-ratio

Proporção no hero

css 
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}

Para fotos de conteúdo completas, prefira max-width fluido. aspect-ratio + cover quando o design exige moldura fixa.

Resolução — srcset e sizes

Srcset com hint sizes

html 
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>

sizes honesto conforme o CSS real.

Art direction com <picture>

Picture para crops diferentes

html 
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>

picture para art direction, não cinquenta breakpoints duplicados.

Molduras fixas — lembrete object-fit

Miniatura de cartão em grid responsivo

css 
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}

Queries mudam colunas; imagens herdam largura do slot. Atualize sizes nos breakpoints.

Experimente

  1. <img> largo — max-width: 100%, height: auto.
  2. aspect-ratio no hero.
  3. srcset com três larguras.
  4. <picture> com dois crops.
  5. thumb fixa com cover.

Erros comuns

  • src enorme sem srcset
  • width: 100% sem height: auto
  • sizes errado
  • object-fit sem caixa
  • repetir @media aqui

Resumo

  • CSS fluido mantém imagens nas colunas
  • aspect-ratio reduz salto
  • srcset/sizes para ficheiro; <picture> para art direction
  • object-fit para molduras fixas
  • Seguinte: Breakpoints

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 56 de 61
Css Tutorial