[Résolu] Image centrer dans le navigateur responsibe

Holà à tous !

Je joue avec flexbox et je me disais que cela pourrait m'aider à afficher une image au centre du navigateur avec sa dimension maximum tout en la redimensionnant lorsque la largeur et la hauteur du viewport viendrait se réduire.

Tout va dans le meilleur des mondes sauf... lorsque le viewport est redimensionné dans sa hauteur : l'image est déformée

Je n'arrive pas à comprendre pourquoi :
http://codepen.io/dasys/pen/dMNoGd

D'avance un grand merci à celles ou ceux qui pourront éclairer ma lanterne.

Bien à vous.

J'y suis arrivé \o/ mais sans flexbox :
http://codepen.io/dasys/pen/grgpzJ

Bon, je ne comprends toujours pas pourquoi ce qui cloche avec flexbox

Hello,

Je suis sur smartphone donc pas en mesure de tester en détail mais ce ne serait pas bêtement le "bug" devenu classique évoqué ici ?
http://www.alsacreations.com/astuce/lire/1701-images-responsive-flexbox-bug-ratio.html

Pour que ton image ne se déforme pas,une régle toute simple à se souvenir elle ne doit pas être un enfant direct d'une boite en display:flex;

http://codepen.io/anon/pen/zqNvyb

Merci à tous !

@Raphael : c'est exactement ça (le "bug"). Merci pour l'article, je comprends mieux à présent.

@gcyriluus : ton exemple fonctionne parfaitement, merci.

En résumé pour contourner le min-height:auto; par défaut, on peut :
- ajouter <div> ou autre autour de l'image
- ajouter un overflow:hidden sur le flex-item
- forcer un min-height:0 sur le flex-item

Belle soirée (j'suis moins bête ).