Skip to main content
FreeToolkit .ai

Gerador de Caixas de Proporção de Aspecto Gere caixas de proporção de aspecto responsivas com abordagens modernas e legadas em CSS.

Gerador de Caixas de Proporção de Aspecto illustration
🎨

Gerador de Caixas de Proporção de Aspecto

Gere caixas de proporção de aspecto responsivas com abordagens modernas e legadas em CSS.

1

Selecione uma proporção pré-definida ou personalizada

Escolha entre proporções comuns (16:9, 4:3, 1:1) ou insira valores personalizados.

2

Configure a caixa

Defina a largura máxima, cor de fundo e escolha entre a abordagem moderna ou legada do CSS.

3

Copie o CSS

Visualize a caixa de proporção e copie o código CSS.

Loading tool...

What Is Gerador de Caixas de Proporção de Aspecto?

O Gerador de Caixas de Proporção de Aspecto cria contêineres responsivos que mantêm uma relação específica de largura para altura, independentemente do tamanho. Manter as proporções de aspecto é essencial para vídeos, imagens, cartões e qualquer elemento que precise de dimensões proporcionais. Essa ferramenta oferece oito configurações predefinidas comuns: 1:1 (quadrado), 4:3 (padrão), 16:9 (tela larga), 21:9 (superlarga), 3:2 (fotografia), 9:16 (retrato), 2:3 (pôster) e 3:4 (tablet). Você também pode definir valores de razão personalizados. A ferramenta suporta tanto a propriedade moderna de aspect-ratio do CSS quanto a técnica de padding-bottom legado para uma maior compatibilidade com navegadores. A pré-visualização mostra a caixa de proporção de aspecto com largura máxima e cor de fundo personalizáveis, e o CSS gerado inclui a abordagem escolhida.

Why Use Gerador de Caixas de Proporção de Aspecto?

  • Oito pré-configurações de proporção comum mais entrada personalizada
  • Ambas as abordagens moderna (aspect-ratio) e legada (padding-bottom) do CSS
  • Largura máxima e cor de fundo personalizáveis
  • A visualização mostra a caixa proporcional com precisão

Common Use Cases

Contêineres de Vídeo

Crie contêineres responsivos 16:9 para vídeos incorporados.

Espaçadores de Imagem

Reserve espaço para imagens enquanto elas carregam para evitar mudanças no layout.

Cartões Responsivos

Mantenha proporções consistentes de cartão em diferentes tamanhos de tela.

Galerias de Fotos

Crie contêineres uniformes para imagens em layouts de grade de galeria.

Technical Guide

A propriedade moderna de aspect-ratio do CSS define diretamente a relação de aspecto preferida: aspect-ratio: 16 / 9. O navegador calcula automaticamente a altura com base na largura do elemento. Isso é suportado em todos os navegadores modernos desde 2021. A técnica legada usa o padding-bottom como um percentual da largura (já que os percentuais de preenchimento são relativos à largura do pai): padding-bottom: 56,25% cria uma relação de 16:9 (9/16 * 100 = 56,25%). A abordagem legada exige position: relative no contêiner e position: absolute; top: 0; left: 0; width: 100%; height: 100% no conteúdo da criança. A abordagem moderna é mais simples e legível. Ambos os métodos criam contêineres responsivos que mantêm sua relação em qualquer largura. A propriedade max-width limita o tamanho do contêiner. Para imagens, a propriedade object-fit controla como a imagem preenche o contêiner de proporção de aspecto.

Tips & Best Practices

  • 1
    Use a propriedade aspect-ratio moderna para código mais limpo e simples
  • 2
    Volte à técnica padding-bottom para suporte a navegadores mais antigos
  • 3
    Use object-fit: cover em imagens dentro dos contêineres de proporção
  • 4
    Defina a largura máxima para evitar que a caixa fique muito grande em telas amplas

Related Tools

Área de Testes do CSS Flexbox - free online tool

Área de Testes do CSS Flexbox

Explorador visual do CSS Flexbox com controles interativos para todas as propriedades do contêiner flexível.

🎨 CSS & Design
Ambiente de Testes do CSS Grid - free online tool

Ambiente de Testes do CSS Grid

Construtor visual de CSS Grid com controles interativos para colunas de modelo, linhas e lacunas.

🎨 CSS & Design
Testador de Design Responsivo - free online tool

Testador de Design Responsivo

Visualize sites na web em pontos de quebra comuns de dispositivos com um visualizador de iframe integrado.

🎨 CSS & Design
Gerador de Consultas de Mídia - free online tool

Gerador de Consultas de Mídia

Gere consultas de mídia CSS com condições de recursos e pontos de quebra pré-definidos.

🎨 CSS & Design

Frequently Asked Questions

Q O que é aspect-ratio no CSS?
A propriedade aspect-ratio define a proporção preferida de largura-para-altura de um elemento, por exemplo, aspect-ratio: 16 / 9.
Q A propriedade aspect-ratio é suportada em todos os lugares?
Sim, ela é suportada em todos os navegadores modernos (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+).
Q O que é o truque do padding-bottom?
Uma técnica legada onde a porcentagem de padding-bottom (relativa à largura) mantém a proporção. 56,25% cria uma proporção de 16:9.
Q Como posso colocar conteúdo dentro de uma caixa de proporção?
Com o aspect-ratio moderno, o conteúdo flui normalmente. Com padding-bottom, os elementos filhos precisam ter position: absolute.
Q Posso usar aspect-ratio com imagens?
Sim, combine aspect-ratio com object-fit em imagens para contêineres de imagem responsivos e proporcionais.

About This Tool

Gerador de Caixas de Proporção de Aspecto is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.