Positionner un div sur une image de taille variable

Version imprimable

22/04/2014, 14h00
LaDentDeLait

Positionner un div sur une image de taille variable
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) :zoubi:
22/04/2014, 15h09
rodolphebrd

Bonjour,

Vous avez un bout de code ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<html> 
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Test</title>
    <head>
 
    <body>
        <div id="Container">
            <div id="Cnt">*--Contiendra un tableau--*</div>
            <img id="Img" src="IMG/Img.jpg">    
        </div>
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 
    html, body {
        margin: 0px;
        padding: 0px;
        height: 100%;
    }
 
        #Container {
            position: relative;
            display: inline-block;
            background-color: blue;
            height: 100%;
            border: solid 3px;
        }
 
            #Img {    
                height: 100%;    
            }
 
            #Cnt {
                position: absolute;
                display: inline;
                z-index: 98;
                left: 18%;
                width: 64.5%;
                top: 20%;
                height: 50%;
                background-color: purple;
            }

Le rendu le plus amusant est sur Chrome : essayer d'abord de rafraîchir avec un navigateur tout petit, puis jouer sur la taille de celui-ci pour voir le rendu, puis répéter l'opération après avoir rafraichir sur un navigateur plus grand...

23/04/2014, 13h00
LaDentDeLait

Désolé de revenir à la charge aussi rapidement, mais à voir le peu de participation, je commence un peu à paniquer qu'un rendu si simple soit aussi dur à obtenir :

Dois-je comprendre qu'il n'y aurait aucun moyen en pur CSS de placer précisément des éléments par dessus une image centrée de taille variable ?

Merci pour vos idée ! :)
23/04/2014, 14h49
rodolphebrd

Je ne suis pas sûr de bien comprendre ce que vous voulez car pour l'instant je ne vois pas de problème.

Et si on travaillait à partir d'un Codepen : http://codepen.io/anon/pen/LanBG
23/04/2014, 17h27
LaDentDeLait
Merci de prendre un peu de temps pour m'éclairer ! :)

J'ai mis à jour le code avec une image un peu plus parlante, ainsi que redimensionné le div à placer pour une meilleure lisibilité.

http://codepen.io/LaDent/pen/maxIv

En jouant sur le Display on obtient différentes facettes du problème :
- inline-block : donne le rendu que je souhaite mais le redimensionnement de l'image ne se fait pas bien : la largeur reste fixe.
- inline : le redimensionnement se fait correctement mais le container ne prends pas toute la hauteur, du coup
  Cnt qui est en absolu et devrait se baser dessus ne corresponds pas
- block : Cnt n'arrive pas à hériter de Container :?

Et pour résoudre le problème de l'image, pourquoi ne pas la placer en background:
Code:

1 2 3 4 5 html {background:url(mon-image.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

23/04/2014, 22h16
LaDentDeLait

Avec "background-size: contain;" ça ressemble à ce que je cherche en effet, sauf que dans ce cas, je n'ai aucun moyen de récupérer la largeur de l'img pour adapter le div qui doit se placer dessus :(
24/04/2014, 22h54
Candygirl
Hello,

Il me semble qu'en remplaçant le height de 100% sur l'image par un height de 100vh on obtient le résultat souhaité (sur FF, IE, Chrome) si j'ai bien compris la problématique ?
Ce qui nous affranchit d'ailleurs de l'héritage des height de 100% mais n'est guère rétrocompatible...
Code:

1 2 3 #BkGrndImg { height: 100vh; }
A noter que les navigateurs basés sur webkit réagissent mal au redimensionnement de la fenêtre (safari, opera, maxthon):-/
25/04/2014, 03h40
LaDentDeLait

J'ai appris l'existence des vh / vw sur un autre forum à peu près au moment où tu me repondais :)

Tout est parafit sauf qu'il reste une petite scroll-bar verticale, existe t'il une solution plus élégante qu'un overflow hidden ? :oops:
27/04/2014, 00h34
Candygirl

Citation:

Envoyé par LaDentDeLait

J'ai appris l'existence des vh / vw sur un autre forum à peu près au moment où tu me repondais :)

Arf ! grillée :-/ Par qui ?! :massacre: ;)

Citation:

Envoyé par LaDentDeLait

Tout est parafit sauf qu'il reste une petite scroll-bar verticale, existe t'il une solution plus élégante qu'un overflow hidden ? :oops:

Un margin,padding, border qui traîne qqpart et provoque un dépassement du 100% ? Au pire, quitte à utiliser des vh, un petit calc (ou box-sizing) devrait pouvoir faire l'affaire