Proporção Constante de Largura para Altura: Técnicas de Design Responsivo em CSS

Introdução

Neste laboratório, exploraremos como criar uma proporção constante de largura para altura em elementos com larguras variáveis. Ao usar a propriedade padding-top em um pseudo-elemento ::before, podemos garantir que a altura do elemento permaneça proporcional à sua largura. Esta técnica pode ser usada para criar quadrados responsivos e outras formas com proporções específicas (aspect ratios).

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 97%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Proporção Constante de Largura para Altura

index.html e style.css já foram fornecidos na VM.

Este trecho de código garante que um elemento com width variável manterá um valor de height proporcional. Para conseguir isso, aplique padding-top no pseudo-elemento ::before, tornando a height do elemento igual a uma porcentagem de sua width. A proporção de height para width pode ser alterada conforme necessário. Por exemplo, um padding-top de 100% criará um quadrado responsivo com uma proporção de 1:1. Para usar este código, basta adicionar o seguinte código HTML:

<div class="constant-width-to-height-ratio"></div>

Em seguida, adicione o seguinte código CSS:

.constant-width-to-height-ratio {
  background: #9c27b0;
  width: 50%;
}

.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Proporção Constante de Largura para Altura. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.