¿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!   https://youtu.be/5ugwp7HlpGs?embedable=true  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   CSS container-type  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   que permite que el contenedor responda como lo haría una imagen, eso está bien. aspect-ratio   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   . Para este ejemplo, podemos usar un valor de tamaño en línea. container-type   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   que, creo, significa consulta de contenedor en línea. Una unidad   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. cqi cqi  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   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. max  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   , que es el título principal, el texto "Vans", hagamos que sea veinticinco   . Y, para el espacio debajo del título, hagamos que sean tres   . strong cqi 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   . Y, para el espacio encima del texto, usemos nuevamente tres   . cqi 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   . Y, para el espacio de arriba y de abajo, usamos la propiedad lógica para   que toma hasta dos valores. El primer valor es el valor sobre el texto y el segundo valor es para el espacio debajo. cqi padding-block  Entonces, vayamos con dos   arriba. Y, en nuestro cálculo, dejaremos   como está, pero usaremos cinco   de espacio adicional. cqi --frameInset cqi   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.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

El modelo Bitcoin UTXO, impulsando un ecosistema único

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

El modelo Bitcoin UTXO, impulsando un ecosistema único

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps