[Résolu] Positionner un bloc sur une image de taille variable

Bonjour à tous et un grand merci à ceux qui pourront prendre 5 minutes pour me faire avancer

Je cherche à positionner et dimensionner précisément un bloc (cnt) par dessus une partie d'une image de taille variable lors du redimensionnement (hauteur à 100% du browser, largeur auto) et à centrer horizontalement le tout sur la page.

Pour cela je pensais :

- Placer l'image dans un div container configuré pour prendre la hauteur du navigateur et la largeur de son contenu (relative + inline-block + height:100%).

- Faire hériter mon bloc "Cnt" de ce "Container" (absolute) afin que le positionnement Left / Top / Width / Height puisse se faire en % de l'image.

Malheureusement, le div container semble s'adapter lors du chargement mais pas lors du redimensionnement du navigateur (ou plutot il s'adapte en largeur OU en hauteur selon son Display, mais pas les deux), du coup le bloc à positionner ne se redimensionne pas correctement

Il me semble avoir essayé toutes les combinaisons de Display / Position possible sur chacun des éléments sans succès.

Quelle autre approche puis-je envisager sachant que mon image ne doit pas être ni déformée ni rognée ?

Encore une fois merci

Le lien ci-dessous permet de mieux comprendre le problème par un redimensionnement de l'afficheur :

http://codepen.io/LaDent/pen/maxIv
Modifié par LaDent (25 Apr 2014 - 00:06)

En fait pas tout à fait, j'ai besoin que le redimensionnement se fasse sans dans déformer et sans rogner l'image.

I'image n'est pas en background puisque le but est justement d'adapter les dimensions du div contenu aux dimensions de l'image (pour masquer toujours la même partie de l'image, dans l'exemple la partie blanche, quel que soit le redimensionnement )

wow je ne connaissait même pas d'existance des vh & vw !

Après une recherche rapide leur prise en charge par les browsers est relativement récente.

Il est aussi fait mention dans un post daté de février un bug sous chrome lors du redimensionnement :
http://www.developpez.net/forums/d1413419/webmasters-developpement-web/css/css3-compatibilite-descendante-unite-mesure-vw-vers-em/

Cela fonctionne parfaitement chez moi avec Chrome 34 & I.E 11 : Donc un énorme merci, sujet résolu !

je relancerai au besoin s'il y a trop d’incompatibilités