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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35183{{"Relación constante de ancho a altura"}} css/colors -.-> lab-35183{{"Relación constante de ancho a altura"}} css/width_and_height -.-> lab-35183{{"Relación constante de ancho a altura"}} css/display_property -.-> lab-35183{{"Relación constante de ancho a altura"}} css/backgrounds -.-> lab-35183{{"Relación constante de ancho a altura"}} css/pseudo_elements -.-> lab-35183{{"Relación constante de ancho a altura"}} end

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.