Como criar imagens adaptativas com CSS Flexbox

. Depois disso, permita que as imagens passem para a próxima linha quando necessário, definindo o “ envoltório flexível ”valor da propriedade para“ enrolar ”.

Em seguida, aplique CSS às imagens especificando o “ imagem ' juntamente com o ' .images-container ' nome. Primeiro, defina o “ flexionar ”valor da propriedade para“ 1 ”Para distribuir igualmente o espaço livre disponível entre as imagens. Em seguida, defina o “ largura máxima ”valor da propriedade para“ 100% ”Para garantir que as imagens não excedam sua largura original. Colocou o ' altura ”valor da propriedade para“ auto ”Para manter a proporção. Por último, adicione espaçamento entre as imagens definindo o “ margem ”valor da propriedade para“ 10 pixels ”:

.images-container {
mostrar: flexionar ;
flex-wrap: envoltório;
}

.images-container img {
flexível: 1 ;
largura máxima: 100 % ;
altura: automático;
margem: 10px;
}

Antes de embrulhar

As imagens adaptativas usando CSS Flexbox foram criadas com sucesso. A visualização de saída abaixo é antes da quebra da janela do navegador:

Depois de embrulhar

Agora, vamos quebrar a janela do navegador para verificar se a imagem é adaptativa, não é:

A imagem acima confirma que as imagens adicionadas são adaptativas.

Conclusão

Para criar as imagens adaptativas com CSS Flexbox, o usuário primeiro precisa criar a estrutura HTML e depois definir a