HTML: ¡Cómo cambiar el tamaño de una imagen con consultas de contenedor CSS!

¿Sabes qué es mejor que usar una imagen al crear un sitio web? ¿Qué tal hacer algo con HTML y CSS que se vea y actúe como una imagen? Y sabes qué, esto es muy fácil ahora con consultas de contenedores. En esta publicación, vamos a crear un anuncio que parece una imagen, con HTML y CSS.

Luego haremos que actúe como una imagen a medida que se comprime, se expande y se mueve a otras ubicaciones dentro del documento. Ok, ¡comprobémoslo!

Bien, tenemos este anuncio de Vans en la barra lateral del sitio que estamos creando y actualmente es una imagen.

Esto dificulta la edición; un diseñador necesitaría actualizarlo y proporcionarnos una nueva imagen si fuera necesario cambiar algo.

Además, probablemente necesitaremos varias versiones para usar con el conjunto fuente para que se vea nítido tanto en pantallas de alta densidad como de baja resolución.

Entonces, tenemos la tarea de convertirlo a HTML; ¿Cómo podemos hacer esto?

Algunas desventajas del uso de imágenes y unidades de ventana gráfica

Bueno, probablemente podríamos usar unidades de ventana gráfica, pero necesitaríamos agregar código adicional si pusiéramos el anuncio en diferentes ubicaciones donde sus dimensiones serían diferentes, ya que todo se basaría en la ventana gráfica y no en las dimensiones del contenedor.

Entonces, podríamos lograrlo, pero podría complicarse un poco. En su lugar, podríamos utilizar consultas de contenedor y unidades de consulta de contenedor. Las consultas de contenedores son un poco como las consultas de medios, pero se basan en las dimensiones de cualquier contenedor determinado en la página en lugar de en la ventana gráfica general.

Configurar un contenedor con la propiedad container-type CSS

Bien, veamos con qué estamos empezando.

Entonces, se ve bastante bien aquí pero, ¿cómo responde?

Uh, el texto y los bordes no cambian de tamaño, por lo que necesita un poco de cariño porque está bastante roto tal como está. Ahora, una cosa que ya estamos haciendo aquí es que estamos usando una aspect-ratio que permite que el contenedor responda como lo haría una imagen, eso está bien.

 figure { aspect-ratio: 1 / 1.5; }

Solo necesitamos cambiar todas las dimensiones del contenido para que también responda correctamente. El primer paso aquí es proporcionar un contenedor para monitorear nuestras dimensiones. Este será nuestro elemento de figura.

Para utilizar consultas de contenedor aquí, debemos definir lo que se conoce como contexto de contención. Podemos hacer esto con la propiedad container-type . Para este ejemplo, podemos usar un valor de tamaño en línea.

 figure { ... container-type: inline-size; }

Esto configurará un contenedor que dimensionará las cosas según su tamaño en línea que, en este caso, será el ancho de la figura. Muy bien, ahora tenemos un contenedor que monitorear, por lo que ahora podemos usar unidades de consulta de contenedor. Y hay mucho para elegir. Podemos utilizar cualquiera de estos valores unitarios:

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Aquí usaremos cqi que, creo, significa consulta de contenedor en línea. Una unidad cqi equivale al uno por ciento del ancho del contenedor. Ok, eso es todo lo que necesitamos; a partir de aquí, simplemente configuramos las unidades según sea necesario.

Aquí tenemos un par de propiedades personalizadas que se utilizan en varios elementos de este anuncio.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

Comencemos con la cantidad que este marco se inserta desde el borde exterior del contenedor. Hagamos que sean tres cqi .

 figure { ... --frameInset: 3cqi; }

A continuación, establezcamos aquí el grosor de los bordes. En este caso, voy a usar la función max para evitar que los bordes se reduzcan por debajo de un píxel, pero quiero que sean dinámicos siempre que sean mayores que ese valor de un píxel.

Entonces, el primer valor es un píxel, luego el segundo es el valor dinámico. Hagámoslo un cqi .

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

Ahora, para el elemento strong , que es el título principal, el texto "Vans", hagamos que sea veinticinco cqi . Y, para el espacio debajo del título, hagamos que sean tres cqi .

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

Ahora, pasemos al subtítulo "Off the Wall". Debería tener aproximadamente la mitad del tamaño del título principal, así que probemos con doce cqi . Y, para el espacio encima del texto, usemos nuevamente tres cqi .

 em { font-size: 12cqi; padding-top: 3cqi; }

Muy bien, para la última pieza, la etiqueta "Desde 1966", usemos un tamaño de fuente de seis cqi . Y, para el espacio de arriba y de abajo, usamos la propiedad lógica para padding-block que toma hasta dos valores. El primer valor es el valor sobre el texto y el segundo valor es para el espacio debajo.

Entonces, vayamos con dos cqi arriba. Y, en nuestro cálculo, dejaremos --frameInset como está, pero usaremos cinco cqi de espacio adicional.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

Ok, genial, esto se ve bien.

Echemos un vistazo a cómo responde. A medida que lo apretamos, todo responde correctamente y de manera uniforme como queríamos. Se parece mucho a una imagen.

Se ve bastante bien incluso cuando es pequeño y puedes ver que los bordes nunca se reducen por debajo de un píxel. Luego, cuando llegamos a anchos muy estrechos, se hace más ancho y todo sigue luciendo genial.

¿Qué tan genial es esto? Un conjunto de estilos y funciona en todos los sentidos. A medida que lo escalamos hacia adelante y hacia atrás, se ve genial.

Ahora, lo que es aún más interesante es que podemos tomar el marcado de nuestro anuncio, moverlo a la región de la columna principal aquí y todo continúa funcionando como lo haría si fuera una imagen.

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

Esto es tan lindo y genial. Recuerde, sólo hay un conjunto de estilos para lograr todo esto. Y no hubo consultas de los medios. Hay bastante más sobre las consultas de contenedores en su conjunto, así que esté atento a publicaciones futuras en las que cubro diferentes aspectos.

¿Quieres verlo en acción?

Consulte el código de demostración y los ejemplos de estas técnicas en el ejemplo de Codepen a continuación. Si tienes alguna pregunta o idea, no dudes en dejar un comentario.