Trabalhar com mídias gráficas na web responsiva é um dos maiores desafios de front-end: fotógrafos enviam imagens verticais de smartphones, clientes fornecem logotipos horizontais e produtos vêm em proporções variadas. Se você forçar dimensões de largura e altura sem controle, as imagens serão achatadas ou esticadas como espelhos de parque de diversões. Pior ainda: quando imagens carregam sem espaço geométrico reservado, a página “pula” violentamente, gerando o temido Cumulative Layout Shift (CLS) que destrói a pontuação de SEO no Google. Nesta lição, você dominará object-fit, object-position e a moderna propriedade aspect-ratio.

1. O Reset Canônico de Mídias Responsivas

Por padrão, elementos <img> e <video> são Elementos Substituídos (Replaced Elements) que possuem dimensões intrínsecas próprias. Se uma foto tiver 3000px de largura, ela transbordará a tela do celular e criará uma barra de rolagem horizontal quebrada.

A regra de ouro de todo projeto moderno é incluir no seu reset global:

/* Reset universal de imagens e mídias */
img, video {
  max-width: 100%; /* Nunca ultrapassa a largura do contêiner pai */
  height: auto;    /* Mantém a proporção de aspecto nativa automaticamente */
  display: block;  /* Remove o espaço em branco fantasma de elementos inline */
}

2. A Propriedade object-fit: O Fim das Imagens Deformadas

Frequentemente, seu layout exige que todas as fotos de um catálogo de produtos tenham exatamente a mesma moldura (por exemplo, width: 100%; height: 240px;).

Se você aplicar essas medidas diretamente, a imagem será distorcida. A propriedade object-fit resolve isso, funcionando para tags <img> exatamente como a consagrada background-size funciona para fundos:

.card-foto {
  width: 100%;
  height: 240px;
  object-fit: cover; /* fill | contain | cover | none | scale-down */
}

Os 5 Modos de Encaixe

• fill (Padrão): Força a imagem a preencher todas as dimensões da caixa, esticando ou achatando os pixels e destruindo a proporção original.
• contain: Preserva a proporção original e garante que 100% da imagem seja visível dentro da moldura. Se as proporções não forem idênticas, surgem faixas vazias nas laterais (efeito letterbox).
• cover (O Campeão da Indústria): Preenche 100% da moldura sem distorcer nenhum pixel. A imagem mantém sua proporção nativa e qualquer excesso além das bordas da caixa é recortado com elegância.
• none: Ignora as dimensões forçadas e exibe a imagem em sua resolução natural de pixels.
• scale-down: Compara none e contain e escolhe dinamicamente a opção que resultar no menor tamanho físico.

3. Enquadramento Preciso com object-position

Quando você usa object-fit: cover, o navegador recorta o excesso da foto a partir do centro exato (50% 50%).

Em retratos de pessoas, isso frequentemente corta a testa ou o queixo do fotografado. Para controlar qual parte da foto deve permanecer visível na moldura, usamos object-position:

.avatar-usuario {
  width: 120px;
  height: 120px;
  object-fit: cover;
  object-position: top center; /* Garante que o rosto no topo nunca seja cortado! */
}

Você pode usar palavras-chave (top, bottom, left, right, center) ou porcentagens precisas (como object-position: 25% 75%).

4. A Revolução do aspect-ratio: Adeus Saltos de Layout (CLS)

Um dos problemas mais graves de usabilidade na web é o Cumulative Layout Shift (CLS): o usuário começa a ler um parágrafo de texto, a imagem finalmente termina de baixar e, repentinamente, empurra o texto 300 pixels para baixo! O Google pune severamente sites com alto CLS no ranqueamento de SEO.

No passado, os desenvolvedores usavam o terrível “hack de padding-bottom percentual” para reservar espaço antes do download. Hoje, o CSS moderno possui a propriedade nativa aspect-ratio:

/* Define a proporção Widescreen perfeita (16:9) */
.video-moldura,
.banner-artigo {
  width: 100%;
  aspect-ratio: 16 / 9; /* O navegador reserva a altura no instante zero! */
  object-fit: cover;
}
 
/* Moldura Quadrada para Instagram / E-commerce */
.card-produto-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Largura e altura sempre matematicamente idênticas */
  object-fit: cover;
}

5. Matriz Comparativa dos Modos de object-fit

6. Laboratório Prático: Comparando Encaixes e aspect-ratio

No código interativo abaixo, comparamos a mesma imagem sob os modos cover, contain e fill, e incluímos um card de vídeo com a moderna proporção aspect-ratio: 16 / 9:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Imagens Responsivas</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
      margin: 0;
    }
 
    .grade-comparativa {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
 
    .card-moldura {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 16px;
    }
 
    .card-moldura h4 {
      margin: 0 0 10px 0;
      color: #38bdf8;
      font-size: 0.95rem;
    }
 
    /* Moldura com altura fixa para testar os modos */
    .foto-demo {
      width: 100%;
      height: 180px;
      background: #020617;
      border-radius: 8px;
    }
 
    .modo-cover   { object-fit: cover; }
    .modo-contain { object-fit: contain; }
    .modo-fill    { object-fit: fill; }
 
    /* Componente com aspect-ratio nativo */
    .card-video {
      max-width: 520px;
      background: #111827;
      border: 1px solid #1f2937;
      border-radius: 12px;
      padding: 20px;
    }
 
    .video-preview {
      width: 100%;
      aspect-ratio: 16 / 9; /* Zero Layout Shift! */
      object-fit: cover;
      border-radius: 8px;
      background: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">Laboratório de object-fit no CSS</h2>
 
  <div class="grade-comparativa">
    <div class="card-moldura">
      <h4>1. object-fit: cover (Perfeito)</h4>
      <img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400" alt="Exemplo Cover" class="foto-demo modo-cover">
    </div>
 
    <div class="card-moldura">
      <h4>2. object-fit: contain (Sem cortes)</h4>
      <img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400" alt="Exemplo Contain" class="foto-demo modo-contain">
    </div>
 
    <div class="card-moldura">
      <h4>3. object-fit: fill (Distorce)</h4>
      <img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400" alt="Exemplo Fill" class="foto-demo modo-fill">
    </div>
  </div>
 
  <div class="card-video">
    <h4 style="margin-top:0; color:#10b981;">Vídeo Responsivo com aspect-ratio: 16 / 9</h4>
    <div class="video-preview">
      ▶ Proporção 16:9 Reservada (Zero CLS)
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e experimente alternar o aspect-ratio para 1 / 1 ou 4 / 3 para ver a moldura se recalcular instantaneamente:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

• O reset max-width: 100%; height: auto; impede que imagens transbordem telas menores.
• object-fit: cover preenche molduras sem distorcer o aspecto original da foto, recortando o excesso.
• object-fit: contain exibe 100% da imagem sem recortes, gerando faixas vazias se a proporção for divergente.
• object-position comanda onde o corte do cover acontece (ex.: top center para preservar rostos).
• aspect-ratio reserva o espaço exato na tela antes do download dos bytes, zerando o Cumulative Layout Shift (CLS).