Mantendo a proporção em elementos div e ressecando automaticamente

ao criar um elemento div reavaliável que permanece centralizado na tela, é importante garantir que seu aspecto seja mantido, independentemente das alterações na janela. Isso pode ser alcançado usando técnicas CSS. O seguinte código CSS demonstra como conseguir isso:

Body { Altura: 100VH; margem: 0; exibição: flex; Justify-Content: Center; alinhado-itens: centro; Antecedentes: cinza; } .estágio { --r: 960 /540; // define a proporção desejada (largura / altura) aspecto-razão: var (-r); // Defina a proporção Largura: min (90%, min (960px, 90VH*(var (-r)))); // Defina a largura e a altura máxima enquanto preserva a taxa exibição: flex; Justify-Content: Center; alinhado-itens: centro; fundo: gradiente linear (30 graus, vermelho 50%, transparente 50%), // Adicione um gradiente para visualizar a proporção de aspecto preservado chocolate; }

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

A maximum of 90% of the available width

A maximum of 960px
• A width that maintains the aspect ratio in relation to the available height (90vh multiplied by var(--r))

• The background O gradiente é adicionado para demonstrar visualmente que a proporção é mantida, pois o ângulo do gradiente permanece constante, independentemente das mudanças nas dimensões do elemento. Esta solução funciona efetivamente para redimensionar a largura e a altura do elemento.