Articles
Introducción a CSS
`aspect-ratio` y diseño responsivo

`aspect-ratio` y diseño responsivo

Este artículo explica la propiedad aspect-ratio y el diseño responsivo.

Presentamos técnicas de diseño responsivo utilizando la propiedad aspect-ratio.

YouTube Video

HTML para vista previa

css-responsive-aspect-ratio.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>aspect-ratio</h2>
20        </header>
21        <article>
22            <h3>aspect-ratio Syntax</h3>
23            <section>
24                <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: &lt;ratio&gt;;
27</pre>
28            </section>
29        </article>
30        <article>
31            <h3>aspect-ratio 1:1</h3>
32            <section>
33                <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36    width: 200px;
37    aspect-ratio: 1 / 1;
38}
39</pre>
40            </section>
41            <header><h4>HTML+CSS</h4></header>
42            <section class="sample-view">
43              <img src="example.jpg" class="square">
44            </section>
45        </article>
46        <article>
47            <h3>aspect-ratio 16:9</h3>
48            <section>
49                <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52    width: 100%;
53    aspect-ratio: 16 / 9;
54}
55</pre>
56            </section>
57            <section class="sample-view">
58              <img src="example.jpg" class="widescreen">
59            </section>
60        </article>
61        <article>
62            <h3>aspect-ratio 2</h3>
63            <section>
64                <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67    width: 400px;
68    aspect-ratio: 2;
69}
70</pre>
71            </section>
72            <section class="sample-view">
73              <img src="example.jpg" class="custom-ratio">
74            </section>
75        </article>
76        <article>
77            <h3>aspect-ratio Example</h3>
78            <section>
79                <header><h4>HTML</h4></header>
80<pre>
81&lt;div class="video-container"&gt;
82  &lt;iframe src="https://www.youtube.com/embed/example"&gt;&lt;/iframe&gt;
83&lt;/div&gt;
84</pre>
85                <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88    width: 100%;
89    aspect-ratio: 16 / 9;
90}
91</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

Propiedad aspect-ratio

La propiedad aspect-ratio se utiliza para establecer la proporción entre ancho y alto (relación de aspecto) de un elemento. Esto es útil cuando deseas mostrar un elemento con una proporción fija, particularmente para contenido multimedia como imágenes o videos, o en diseño responsivo.

Sintaxis Básica 

1aspect-ratio: <ratio>;
  • <ratio> especifica la proporción entre ancho y alto. La proporción se escribe en el formato "ancho:alto" o representada por un solo número para la relación entre ancho y alto.

Ejemplo

Relación de aspecto 1:1 (Cuadrado)

Así es como se ve con una relación de aspecto 1:1.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • En este caso, los elementos con la clase .square están configurados para tener siempre el mismo ancho y alto, mostrándose como un cuadrado.

Relación de aspecto 16:9 (Vídeos o imágenes en pantalla ancha)

Así es como se ve con una relación de aspecto 16:9, que se utiliza a menudo para vídeos o imágenes en pantalla ancha.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • En este caso, los elementos con la clase .widescreen ajustan automáticamente su altura según el ancho mientras mantienen una relación de aspecto de 16:9.

Especificar la relación con un solo número

Así es como se ve al especificar la relación con un solo número.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Aquí, el número 2 representa una proporción de 2 / 1, haciendo que el ancho del elemento sea el doble de su altura.

Beneficios de la propiedad aspect-ratio

  • Diseño responsivo El elemento puede ajustar automáticamente su tamaño manteniendo la relación de aspecto en diferentes dispositivos y tamaños de ventana.
  • Implementación sencilla Para mantener una relación específica, se empleaban métodos tradicionales como el uso de padding, pero con aspect-ratio se puede establecer de manera más sencilla.

Caso de Uso Real

Por ejemplo, los reproductores de vídeo como YouTube suelen mostrarse con una relación de aspecto 16:9. Para mantener esta relación, se puede usar la propiedad aspect-ratio para crear fácilmente un contenedor de video responsivo.

1<div class="video-container">
2  <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>
1.video-container {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Esto permite que los videos mantengan una relación de 16:9 en cualquier dispositivo.

Resumen

  • aspect-ratio es una propiedad que especifica la proporción entre el ancho y la altura de un elemento.
  • Especificando una proporción, el diseño responsivo puede implementarse fácilmente.
  • Es muy útil para elementos que necesitan mantener una proporción específica, como imágenes, videos y diseños de tarjetas.

En comparación con las técnicas complejas tradicionales de CSS, aspect-ratio destaca por su simplicidad y uso intuitivo.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

`@media` y diseño responsivo