LabEx
EntrarÚnete

Relación de aspecto del contenedor reactivo con CSS

Beginner

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

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.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 96%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

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:

  1. Defina la relación de aspecto deseada utilizando una propiedad personalizada de CSS, --aspect-ratio.
  2. Establezca la propiedad position del elemento contenedor en relative y su propiedad height en 0.
  3. 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.
  4. Establezca el hijo directo del elemento contenedor en position: absolute, top: 0, left: 0, width: 100% y height: 100%.
  5. 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.