Bonjour à tous

Je cherche à faire un petit jeu en javascript qui s'intègre sur une image.

J'aimerai que :
  • l'image soit centrée horizontalement et occupe 100% de la hauteur du navigateur, en respectant le ratio de redimensionnement (la largeur de cette image est donc variable)
  • un div "Cnt" puisse être placé sur l'image de manière à couvrir une partie précise de celle-ci quel que soit le redimensionnement du navigateur
  • la solution soit viable au moins pour Chrome et IE


Je pensais utiliser :

  • une img, avec une hauteur à 100% de son parent
  • un div "Cnt" en positionnement absolu avec Left, Top, Width et Height exprimés en pourcentages
  • un div "Container" configuré ainsi :

  • > inline-block de manière à pouvoir le centrer en lui assignant une hauteur à 100% du navigateur (pour l'image)
  • > relatif, pour que le placement de "Cnt" de base dessus (et donc qu'un top de Cnt à 10% arrive à 10% du haut de l'image)

Malheureusement, et après avoir à peu près essayé toutes les combinaisons qui me sont venues à l'esprit, à compris des div tampon, je
n'arrive pas à résoudre ces trois contraintes en même temps. Quelqu'un pourrait il me mettre sur la bonne voie ?

Merci par avance !


PS : Je sais que la solution est simple en javascript, mais j’aurai aimé séparer le code du jeu (js) de la présentation (css)