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)
Partager