Easy Builder

Como calcular tamanho de imagens lado a lado

Para várias imagens na mesma linha, calcule a largura de cada uma a partir da largura da seção, dos espaçamentos e da quantidade.

Quando acontece

Você quer colocar várias imagens lado a lado e não sabe qual largura usar para cada uma sem distorcer.

Solução

  1. Use a largura da seção de 1920px como base (padrão desktop).
  2. Aplique a fórmula: (largura da seção - (número de imagens - 1) x espaçamento) / número de imagens. O número de espaçamentos é sempre a quantidade de imagens menos 1.
  3. Exemplo: 5 imagens com espaçamento de 20px => (1920 - 4x20) / 5 = 368px de largura por imagem (5 imagens têm 4 espaçamentos).
  4. A altura é relativa e pode ser ajustada conforme a necessidade.
  5. Otimize as imagens (AVIF/WebP) antes de subir - veja Boas Práticas.

Observação: Para imagens de fundo de seção (hero), veja a Aula 3 em Usuário Experiente e a tabela de tamanhos em Boas Práticas.