Eu tropecei neste método recentemente após algumas tentativas e erros ao criar um site que tem um layout responsivo de largura total.
Eu queria várias imagens no site para:
- ocupar 100% da largura de seu pai
- dimensionar usando a proporção correta da imagem
- reduza para um tamanho razoável com um
background-size:coverefeito.
É mais fácil mostrar do que contar, então dê uma olhada na demonstração aqui: http://codepen.io/aMoniker/pen/bCtfv
Redimensione a janela renderizada e você terá uma ideia de como ela funciona.
A essência do truque é que um elemento de contêiner ( .flex-image) envolve um real <img>. O contêiner configura seu background-imagepara a mesma fonte de <img>e obtém um background-size:cover;. Então, o <img>torna-se invisível viavisibility:hidden;
Então, o que você realmente vê é a imagem de fundo, enquanto o <img>elemento invisível estica o .flex-imagecontêiner para as dimensões apropriadas à medida que é aumentado. Quando é reduzido, o (opcional) min-height no flex container oferece a vantagem de um background-size:cover;efeito.
Você pode usar isso em combinação com outros painéis para criar efeitos agradáveis e flexíveis para suas páginas responsivas. Assim: http://codepen.io/aMoniker/pen/zwgCp
¡Que disfruta!