LabEx
EntrarJunte-se

Container Responsivo com Proporção (Aspect Ratio) em CSS

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, aprenderemos como criar um container responsivo com uma proporção especificada usando CSS. Você será apresentado à propriedade customizada --aspect-ratio e como usar a função calc() para calcular a altura do container. Você também aprenderá como configurar o elemento filho para manter a proporção usando a propriedade object-fit: cover. Ao final deste laboratório, você terá uma melhor compreensão de como criar containers visualmente atraentes e responsivos em suas páginas web.

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 96%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Proporção (Aspect Ratio)

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

Este código cria um container responsivo com uma proporção específica usando propriedades customizadas CSS e a função calc(). Siga estes passos para conseguir isso:

  1. Defina a proporção desejada usando uma propriedade customizada CSS, --aspect-ratio.
  2. Defina a propriedade position do elemento container para relative e sua propriedade height para 0.
  3. Calcule a altura do elemento container usando a função calc() e a propriedade customizada --aspect-ratio, e defina-a como a propriedade padding-bottom.
  4. Defina o filho direto do elemento container para position: absolute, top: 0, left: 0, width: 100% e height: 100%.
  5. Mantenha a proporção do elemento filho definindo sua propriedade object-fit para cover.

Use o seguinte código HTML e CSS para criar o container:

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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 (Aspect Ratio). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.