Garantindo a preservação da proporção na viewport

Em web design, manter a proporção dos elementos enquanto se adapta às dimensões variáveis ​​da viewport é crucial. Isso garante consistência em diferentes tamanhos e orientações de tela. Para conseguir essa preservação especificamente ao lidar com um elemento quadrado, a seguinte abordagem CSS pode ser implementada:

Utilizando a propriedade de proporção de aspecto

A partir de 2022, o aspecto A propriedade -ratio oferece uma solução robusta para controlar a proporção dos elementos. Ao especificar a proporção desejada entre largura e altura, esta propriedade adapta o tamanho do elemento para manter a proporção especificada. Fundamentalmente, a adaptação do tamanho é limitada pela menor dimensão da janela de visualização, atendendo ao requisito de ajuste dinâmico às orientações paisagem e retrato.

Exemplo de implementação

Para demonstrar a funcionalidade da propriedade de proporção de aspecto, o seguinte código pode ser usado:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

Neste exemplo, são criados dois divs com proporções distintas (1:1 e 16:9). A propriedade de proporção garante que, independentemente da orientação do dispositivo, esses divs mantenham a forma e o tamanho desejados na janela de visualização. Além disso, suas dimensões são ajustadas para caber na menor dimensão da janela de visualização, garantindo que o formato quadrado seja preservado.