Positionner un div sur une image de taille variable

**LaDentDeLait** · 22/04/2014, 15h00

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)

**rodolphebrd** · 22/04/2014, 16h09

Bonjour,

Vous avez un bout de code ?

**LaDentDeLait** · 22/04/2014, 16h46

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**LaDentDeLait** · 23/04/2014, 14h00

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 !

**rodolphebrd** · 23/04/2014, 15h49

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

**LaDentDeLait** · 23/04/2014, 18h27

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

**rodolphebrd** · 23/04/2014, 19h52

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;}

**LaDentDeLait** · 23/04/2014, 23h16

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

**Candygirl** · 24/04/2014, 23h54

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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):-/

**LaDentDeLait** · 25/04/2014, 04h40

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 ?

**Candygirl** · 27/04/2014, 01h34

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 ?!

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 ?

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

Positionner un div sur une image de taille variable

Positionnement en CSS

Discussions similaires

Partager

Partager