Contenedor reactivo | Relación de aspecto | Tutorial de CSS

Introducción

En este laboratorio, aprenderemos a crear un contenedor reactivo con una relación de aspecto específica utilizando CSS. Se te presentará la propiedad personalizada --aspect-ratio y cómo utilizar la función calc() para calcular la altura del contenedor. También aprenderás a establecer el elemento hijo para mantener la relación de aspecto utilizando la propiedad object-fit: cover. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear contenedores visualmente atractivos y reactivos en tus páginas web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/CSSPreprocessorsGroup -.-> css/variables("Variables") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35169{{"Relación de aspecto del contenedor reactivo con CSS"}} css/width_and_height -.-> lab-35169{{"Relación de aspecto del contenedor reactivo con CSS"}} css/positioning -.-> lab-35169{{"Relación de aspecto del contenedor reactivo con CSS"}} css/variables -.-> lab-35169{{"Relación de aspecto del contenedor reactivo con CSS"}} css/nesting -.-> lab-35169{{"Relación de aspecto del contenedor reactivo con CSS"}} end

Relación de aspecto

index.html y style.css ya se han proporcionado en la máquina virtual.

Este código crea un contenedor reactivo con una relación de aspecto específica utilizando propiedades personalizadas de CSS y la función calc(). Siga estos pasos para lograr esto:

Defina la relación de aspecto deseada utilizando una propiedad personalizada de CSS, --aspect-ratio.
Establezca la propiedad position del elemento contenedor en relative y su propiedad height en 0.
Calcule la altura del elemento contenedor utilizando la función calc() y la propiedad personalizada --aspect-ratio, y asígnela como la propiedad padding-bottom.
Establezca el hijo directo del elemento contenedor en position: absolute, top: 0, left: 0, width: 100% y height: 100%.
Mantenga la relación de aspecto del elemento hijo estableciendo su propiedad object-fit en cover.

Utilice el siguiente código HTML y CSS para crear el contenedor:

<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;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Relación de aspecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.