Relación constante de ancho a altura: Técnicas de diseño responsivo

Introducción

En este laboratorio, exploraremos cómo crear una relación constante de ancho a altura para elementos con anchos variables. Al utilizar la propiedad padding-top en un pseudo-elemento ::before, podemos garantizar que la altura del elemento permanezca proporcional a su ancho. Esta técnica se puede utilizar para crear cuadrados responsivos y otras formas con proporciones específicas.

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 97%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Relación constante de ancho a altura

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

Este fragmento de código asegura que un elemento con ancho variable conservará un valor de altura proporcional. Para lograr esto, aplica padding-top en el pseudo-elemento ::before, haciendo que la altura del elemento sea igual a un porcentaje de su ancho. La proporción de altura a ancho se puede modificar según sea necesario. Por ejemplo, un padding-top de 100% creará un cuadrado responsivo con una relación 1:1. Para utilizar este código, simplemente agrega el siguiente código HTML:

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

Luego, agrega el siguiente 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;
}

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

¡Felicitaciones! Has completado el laboratorio de Relación constante de ancho a altura. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.