HTML: Como redimensionar uma imagem com consultas de contêiner CSS!

Você sabe o que é mais legal do que usar uma imagem na hora de construir um site? Que tal fazer algo com HTML e CSS que pareça e funcione como uma imagem? E quer saber, isso é super fácil agora com consultas de contêiner. Neste post vamos fazer um anúncio, que parece uma imagem, com HTML e CSS.

Em seguida, faremos com que ela atue como uma imagem à medida que é comprimida, expandida e movida para outros locais do documento. Ok, vamos dar uma olhada!

Ok, então temos esse anúncio da Vans na barra lateral do site que estamos construindo, e atualmente é uma imagem.

Isso dificulta a edição; um designer precisaria atualizá-lo e nos fornecer uma nova imagem se algo precisasse mudar.

Além disso, provavelmente precisaríamos de várias versões para usar com o conjunto de origem, para que pareça nítido em telas de alta densidade e baixa resolução.

Portanto, temos a tarefa de convertê-lo para HTML; Como podemos fazer isso?

Algumas desvantagens do uso de imagens e unidades de viewport

Bem, provavelmente poderíamos usar unidades de janela de visualização, mas precisaríamos adicionar código extra se colocássemos o anúncio em locais diferentes onde suas dimensões seriam diferentes, já que tudo seria baseado na janela de visualização e não nas dimensões do contêiner.

Então, poderíamos conseguir, mas poderia ficar um pouco confuso. Em vez disso, poderíamos usar consultas de contêiner e unidades de consulta de contêiner. As consultas de contêiner são um pouco como consultas de mídia, mas baseadas nas dimensões de qualquer contêiner na página, em vez da janela de visualização geral.

Configurando um contêiner com a propriedade CSS container-type

Ok, vamos verificar com o que estamos começando.

Então, parece muito bom aqui, mas como ele responde?

Uh, o texto e as bordas não mudam de tamanho, então ele precisa de um pouco de atenção porque está bem quebrado do jeito que está. Agora, uma coisa que já estamos fazendo aqui é usar uma aspect-ratio que permite que o contêiner responda como uma imagem faria, tudo bem.

 figure { aspect-ratio: 1 / 1.5; }

Só precisamos alterar todas as dimensões do conteúdo para que ele também responda corretamente. O primeiro passo aqui é fornecer um contêiner para monitorar nossas dimensões. Este será o nosso elemento de figura.

Para usar consultas de contêiner aqui, precisamos definir o que é conhecido como contexto de contenção. Podemos fazer isso com a propriedade container-type . Para este exemplo, podemos usar um valor de tamanho embutido.

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

Isso configurará um contêiner que dimensionará as coisas com base em seu tamanho embutido que, neste caso, será a largura da figura. Tudo bem, agora temos um contêiner para monitorar e estamos livres para usar unidades de consulta de contêiner. E há muito por onde escolher. Podemos usar qualquer um destes valores unitários:

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

Aqui, usaremos cqi que, acredito, significa consulta de contêiner inline. Uma unidade cqi é igual a um por cento da largura do contêiner. Ok, isso é tudo que precisamos; a partir daqui, estamos apenas definindo as unidades conforme necessário.

Aqui, temos algumas propriedades personalizadas que são usadas em vários elementos deste anúncio.

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

Vamos começar com o quanto esse quadro é inserido na borda externa do contêiner. Vamos fazer três cqi .

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

A seguir, vamos definir a espessura das bordas aqui. Nesse caso, usarei a função max para evitar que as bordas encolham abaixo de um pixel, mas quero que sejam dinâmicas, desde que sejam maiores que o valor de um pixel.

Portanto, o primeiro valor é um pixel, depois o segundo é o valor dinâmico. Vamos fazer um cqi .

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

Agora, para o elemento strong , que é o título principal, o texto “Vans”, vamos fazer vinte e cinco cqi . E, para o espaço abaixo do título, vamos fazer três cqi .

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

Agora, vamos passar para o subtítulo “Off the Wall”. Deve ter cerca de metade do tamanho do título principal, então vamos tentar doze cqi . E, para o espaço acima do texto, vamos com três cqi novamente.

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

Tudo bem, para a última peça, o rótulo "Desde 1966", vamos usar um tamanho de fonte seis cqi . E, para o espaço acima e abaixo, estamos usando a propriedade lógica padding-block que leva até dois valores. O primeiro valor é o valor acima do texto e o segundo valor é para o espaço abaixo.

Então, vamos com dois cqi acima. E, em nosso cálculo, deixaremos --frameInset como está, mas usaremos cinco cqi de espaço adicional.

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

Ok, legal, isso parece bom.

Vamos dar uma olhada em como ele responde. À medida que o apertamos, tudo responde de maneira adequada e uniforme, como queríamos. Parece muito com uma imagem.

Parece muito bom mesmo quando é pequeno, e você pode ver que as bordas nunca diminuem abaixo de um pixel. Então, quando chegamos a larguras realmente estreitas, ela fica mais larga e tudo ainda parece ótimo.

Quão legal é isso? Um conjunto de estilos e funciona perfeitamente. À medida que dimensionamos para frente e para trás, parece ótimo.

Agora, o que é ainda mais legal é que podemos pegar a marcação do nosso anúncio, movê-la para a região da coluna principal aqui, e tudo continua funcionando como funcionaria se fosse uma imagem.

 <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> 

Isso é tão legal e legal. Lembre-se de que há apenas um conjunto de estilos para realizar tudo isso. E nenhuma consulta de mídia estava envolvida. Há muito mais sobre consultas de contêiner como um todo, então fique atento a postagens futuras onde abordarei diferentes aspectos.

Quer ver isso em ação?

Confira o código de demonstração e exemplos dessas técnicas no exemplo do Codepen abaixo. Se você tiver alguma dúvida ou opinião, não hesite em deixar um comentário.