Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

imagens em flexbox

Uma dúvida.

No caso de imagens, como fazemos para em um grid de imagens manter elas responsivas dentro dos flex itens? Por exemplo, se coloco uma imagem dento de uma div, que terá seu tamanho alterado como flex item, ou seja ela vai esticar, ainda mais que soube que o padrão de um flex iten é stretch. Coloco essa imagem como e no css um width: 100% para ocupar completamente o pai ou uso ela como background com a propriedade background: cover; ??

2 respostas
solução!

Olá Lucas, tudo bem?

Um ponto super interessante que você trouxe.

Nessa caso, de ambas as formas irão funcionar. Porém, qual escolher?

No curso de Arquitetura CSS, nós estudamos mais sobre essas decisões que temos que tomar ao longo do desenvolvimento do projeto, é algo que não se trata especificamente de flexbox mas sim de uma boa prática de programação.

De modo geral, dizemos que se a sua imagem transmite uma mensagem ou é muito importante para o propósito do site, priorizamos a sua colocação no HTML e a alteramos no CSS, como você citou de adicionar a width: 100%. Entretanto, caso a imagem seja necessária apenas esteticamente, sem muito valor semântico para o site, nós a colocamos por meio da propriedade background-image: URL("") e depois estilizamos com o cover, por exemplo.

Espero ter ajudado, abraços!

Muito Obrigado pelo insight.