Defina atributos HTML precisos de width e height para a imagem e, em seguida, use CSS para tornar responsiva sua largura exibida e automática sua altura. As dimensões fornecem antecipadamente uma proporção sem prender a imagem a esse tamanho de exibição. MDN: Imagens multimídia

Este guia é para quem edita uma página HTML em um Mac e quer que uma imagem seja redimensionada com seu contêiner, reservando espaço proporcional antes de carregar. O exemplo usa um gráfico abstrato independente, para que você possa experimentar o comportamento de dimensionamento sem baixar um recurso.

Como as dimensões reservam espaço sem fixar o tamanho de exibição?

Uma imagem tem dimensões de recurso, como 1200 por 800, e um tamanho de exibição determinado pelo layout. Esses números podem ser diferentes. Os atributos de dimensão HTML fornecem indicações de dimensionamento; sua folha de estilos pode substituir a largura e a altura exibidas. O padrão HTML também mapeia os atributos para uma proporção preferencial no formato auto 1200 / 800. Padrão HTML: atributos para conteúdo incorporado e imagens

Para um recurso de 1200 por 800, a proporção é 3:2. Assim que o layout estabelece uma largura de exibição, o navegador pode calcular uma altura proporcional antes de o recurso terminar de carregar. A MDN recomenda informar ambas as dimensões junto com CSS responsivo para reduzir mudanças de layout relacionadas a imagens. MDN: Imagens multimídia

A divisão prática de responsabilidades é simples: o HTML descreve as dimensões do recurso, e o CSS descreve como ele se encaixa na página. Mantenha essas descrições consistentes. Informar as dimensões é útil mesmo quando a imagem nunca será exibida em seu tamanho original.

Escolha se a imagem deve preencher o contêiner

Use o seguinte fragmento CSS quando a imagem deve preencher a largura disponível do contêiner. Ele pressupõe que a imagem tenha a classe responsive-image e atributos de dimensão precisos:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Se a imagem deve diminuir quando necessário, mas manter a largura declarada quando houver mais espaço, use este fragmento alternativo:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

O segundo padrão é a abordagem documentada pela MDN para manter uma imagem dentro de um contêiner mais estreito. Neste layout simples, width: 100% preenche o contêiner, enquanto max-width: 100% define um limite máximo. Mantenha height: auto em ambos os padrões para que a altura acompanhe a proporção, em vez de permanecer na altura definida no HTML. MDN: Imagens multimídia

Experimente uma página completa com imagem responsiva no seu Mac

Abra o TextEdit, escolha File > New e, em seguida, Format > Make Plain Text. Cole o documento completo abaixo. Salve-o como shape-demo.html; se o TextEdit perguntar qual extensão usar, escolha Use .html. Estas são as etapas documentadas pela Apple para criar um arquivo HTML. Apple: Trabalhar com documentos HTML no TextEdit no Mac

O documento inclui o CSS e um SVG codificado que contém uma composição original de círculo e retângulo. Não há arquivos adicionais nem pacotes para instalar. O recurso e o elemento de imagem declaram dimensões de 1200 por 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Abra o arquivo salvo no navegador e estreite a janela. A composição deve diminuir proporcionalmente, e Marker B deve permanecer abaixo dela. Ao alargar a janela, a composição aumenta até o contêiner do exemplo atingir seu limite máximo de 900 pixels. Esse limite é uma escolha ilustrativa de design de página; não é uma exigência da técnica de reserva de espaço.

O recurso incorporado carrega imediatamente, portanto este exemplo demonstra o dimensionamento responsivo, e não um download visivelmente atrasado. O SVG codificado foi analisado e suas dimensões foram verificadas com Python; os cálculos abaixo também foram executados. A renderização no navegador não foi executada durante a preparação.

Para adaptar a página a outro recurso, substitua o valor de src e atualize ambas as dimensões HTML para corresponderem a esse recurso. Use números inteiros sem unidade, como 1200, em vez de 1200px, nesses atributos. A MDN especifica esse formato para as dimensões de imagens. MDN: O elemento de incorporação de imagem

Quanto espaço o navegador deve reservar?

Para este layout simples, sem borda nem preenchimento na imagem, calcule a altura esperada assim:

altura exibida = largura exibida × altura do recurso ÷ largura do recurso

Usando as dimensões de 1200 por 800 do exemplo, obtemos estes resultados ilustrativos. As larguras se referem à caixa de conteúdo da imagem, não à janela inteira do navegador.

Largura exibida da imagem Altura proporcional
300 pixels CSS 200 pixels CSS
600 pixels CSS 400 pixels CSS
900 pixels CSS 600 pixels CSS

Esse cálculo também é útil para diagnosticar problemas. Suponha que o recurso real tenha 1200 por 800, mas que o HTML declare incorretamente 1200 por 600. Com uma largura exibida de 600 pixels, a proporção declarada sugere uma altura de 300 pixels; a proporção real exige 400 pixels. Isso deixa uma possível correção de 100 pixels quando a proporção natural se torna disponível.

A correção decorre da parte auto da indicação de proporção: uma imagem com proporção natural usa essa proporção quando ela está disponível. Portanto, atributos precisos são importantes mesmo quando a folha de estilos está correta. A especificação CSS define essa distinção entre uma proporção fornecida e a proporção natural de um elemento substituído. Módulo de dimensionamento de caixas CSS, nível 4: proporções preferenciais

Quando você deve usar aspect-ratio do CSS?

Use uma proporção CSS explícita quando o layout definir deliberadamente o formato da caixa da imagem. Por exemplo, um bloco quadrado é um requisito diferente de exibir proporcionalmente toda a composição 3:2.

O trecho a seguir substitui o CSS do exemplo completo. Substitua a regra .responsive-image existente por esta:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Aqui, aspect-ratio: 1 / 1 solicita uma caixa quadrada. A largura continua responsiva, e a altura automática é calculada com base nessa largura. Uma proporção preferencial precisa de pelo menos uma dimensão automática para influenciar o dimensionamento; definir ambas as dimensões explicitamente elimina essa função. MDN: aspect-ratio

A declaração object-fit: contain mantém toda a composição visível dentro do quadrado, deixando espaço vazio onde as formas não preenchem o recurso. Alterar o valor para cover preenche o quadrado, mas corta parte da composição. Escolha esse comportamento deliberadamente: o corte pode remover partes significativas de uma imagem. MDN: object-fit

Para uma proporção temporária que deve ceder à proporção natural do recurso, o CSS também aceita um valor como aspect-ratio: auto 3 / 2. Isso pode alterar as proporções da caixa após o carregamento, caso o recurso seja diferente. Uma proporção sem auto expressa, em vez disso, o formato preferencial definido pelo layout. Módulo de dimensionamento de caixas CSS, nível 4: proporções preferenciais

O que você deve verificar se a imagem ainda desloca o layout ou fica esticada?

Verifique o recurso e o layout nesta ordem:

  1. Confirme as duas dimensões HTML. Elas devem descrever o recurso com precisão. Uma largura correta combinada com uma altura incorreta ainda fornece uma proporção errada.
  2. Verifique a altura aplicada pelo CSS. No exemplo proporcional, ela deve ser auto. Outra regra correspondente pode estar atribuindo uma altura fixa.
  3. Verifique a largura exibida. O cálculo do espaço reservado depende da largura estabelecida pelo layout. Redimensionar o navegador altera intencionalmente essa largura e sua altura proporcional.
  4. Verifique as regras de proporção explícitas. Uma proporção CSS quadrada e uma proporção natural de 3:2 expressam intenções de dimensionamento diferentes.
  5. Verifique separadamente o ajuste da imagem. contain e cover controlam como o recurso se encaixa na caixa; eles não fornecem as dimensões ausentes da caixa.

Essas verificações seguem a distinção entre a caixa do elemento, sua proporção preferencial e o recurso renderizado dentro dela. O guia da MDN sobre proporção de aspecto explica como dimensões explícitas afetam o dimensionamento proporcional, enquanto a referência de object-fit documenta o ajuste e o corte. MDN: Entender e definir proporções, MDN: object-fit

O suporte dos navegadores também tem limites. A MDN indica que a propriedade CSS aspect-ratio está amplamente disponível nos navegadores desde setembro de 2021. Isso não comprova o suporte em todos os navegadores mais antigos, nem é uma data de compatibilidade para todos os comportamentos de mapeamento das dimensões HTML. Consulte as informações de compatibilidade da documentação se um navegador mais antigo fizer parte dos seus requisitos. MDN: aspect-ratio

Para a tarefa comum de exibir uma imagem proporcionalmente, comece com dimensões HTML precisas e CSS responsivo. Use uma proporção CSS explícita quando a página exigir um formato específico para a caixa. Juntas, essas escolhas permitem reservar o espaço pretendido enquanto o tamanho exibido acompanha o layout da página.

Fontes