Positionner précisément un élément au-dessus d'une image "responsive" et "contain"

**Tchandra** · 07/03/2016, 13h58

Bonjour

Je suis en train de travailler sur mon site perso pour le rendre "responsive". En mode paysage, j'ai 2 colonnes, un menu à gauche et une zone principale à droite, le tout centré au milieu de l'écran. La zone principale contient une image de fond au format 600*900, donc de type "portrait", et je veux qu'elle soit tout le temps affichée en pleine hauteur sans être déformée ou recadrée, j'ai utilisé les dimensions height: 100vh et width: 66vh pour ma zone principale, ça fonctionne bien.

En mode portrait, je veux que le bandeau de menu disparaisse et que seule reste l'image centrée, avec soit des barres noires en haut et en bas, soit sur les côtés (type cinema). Pour cela j'utilise background-size:contain et je centre l'image avec background-position:center et margin:auto.

Ca marche également, le problème, c'est que j'aimerais, en mode portrait, placer avec précision un bouton "menu" dans un endroit précis de l'image (ainsi que d'autres éléments mais je simplifie le problème ici...) et je ne sais pas comment positionner ces éléments par rapport à l'image car celle-ci se place un peu n'importe où dans la div qui la contient selon la dimension du viewport.

Voici le html :

Code :

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
<!doctype>
<html>
<head>
	<title>test</title>
	<meta charset="iso-8859-1" />
	<link rel="stylesheet" href="....css" />
</head>
 
 
<body>
 
	<div class="zoneMenu"></div>
	<div class="zoneMain">
		<div class="boutonMenu">menu</div>
	</div>
 
</body>
</html>

et le css :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
* { box-sizing: border-box;}     
 
body {
	background-color: black ;
	width: 96.6vh ; 
	height: 100vh ;
	margin: 0 auto ;
}
 
.zoneMenu {
	width: 30vh ; 
	height: 100vh ;
	float: left; 
	border: solid red 1px;
}
 
.zoneMain {
	width: 66.6vh ;
	height: 100vh;
	position: relative;
	float: left; 
	background: url("merJaune.jpg") ;
	background-repeat: no-repeat;
	background-size: 66.6vh 100vh; 
	background-origin: content-box;
	border: solid red 1px;
}		
 
 
.boutonMenu {
	display: none ;
}
 
 
@media only screen and (orientation: portrait) {
 
	body {
		width: 100%;
		height: 100%;
	}
 
	.zoneMenu {
		display: none;
	}
 
	.zoneMain {
		max-width: 100% ;
		max-height: 100%;
		float: none;
		background-size: contain;
		background-position: center;   
		background-origin: padding-box;
		margin: auto ;
		padding: 0px ;  
	}		
 
	.boutonMenu {
		display: block ;
		position: absolute;
		width: 20%; 
		margin-top: 10%;
		margin-left: 40%;
		border: solid black 1px; 
    	        background-color: rgba(50, 50, 50, 0.2);
		color: white;
		text-align: center; 
		border-radius : 5px;
	}
}

Les bordures rouges servent juste à délimiter les sections.
Le problème est surtout visible quand on réduit au minimum la largeur de la fenêtre du navigateur et qu'on augmente sa hauteur au max, le bouton "menu" n'est plus sur l'image...

Une solution consiste à supprimer la ligne background-position: center; l'image est alors collée au bord supérieur et la position du bouton menu reste constante par rapport à l'image, mais l'image n'est plus centrée et ça fait pas terrible...
Je ne suis pas un expert, j'apprends en faisant, jusqu'à présent j'arrive à m'en sortir mais là je ne vois pas comment faire...

J'ai essayé également avec une balise img au lieu d'une image de fond, c'est quasiment le même code, dans ce cas, le problème c'est que l'image reste toujours collée au bord supérieur.
Voici le html:

Code :

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
<!doctype>
<html>
<head>
	<title>test</title>
	<meta charset="iso-8859-1" />
	<link rel="stylesheet" href="....css" />
</head>
 
 
<body>
	<div class="zoneMenu"></div>
 
	<div class="zoneMain">
		<img id="fond" src="merJaune.jpg" />
		<div class="boutonMenu">menu</div>
	</div>
 
</body>
</html>

Le css :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 * { box-sizing: border-box;}
 
body {
	background-color: black ;
	margin: 0 auto;
	width: 97.7vh ; 
	height: 100vh ;
	}
 
.zoneMain {
	width: 66.7vh ;
	height: 100vh;
	position: relative;
	float: left;
	border: solid red 1px;
}		
 
.zoneMenu {
	position: relative;
	float: left;
	width: 30vh ; 
	height: 100%;
	border: solid red 1px;
}
 
#fond{
	position: absolute;
	width: 66.7vh ;
	display: block; 
}
 
 
@media only screen and (orientation: portrait) {
 
	body {
		width: 100%;
		height: 100%;
	}
 
	.zoneMenu { 
		display: none;
	}
 
	.zoneMain {
		float: none;
		max-width: 100% ;
		vertical-align: middle; 
		margin: auto;
		border: solid red 1px;
	}		
 
 
	#fond{
		max-width: 100%;
		max-height: 100%;
		margin: auto;
	}
 
	.boutonMenu {
		display: block ;
		position: absolute;
		width: 20%; 
		margin-top: 15px;
		margin-left: 40%;
		border: solid black 1px; 
		z-index: 1;
		background-color: rgba(50, 50, 50, 0.2);
		color: white;
		text-align: center; 
		border-radius : 5px;
	}
}

Merci.

**Tchandra** · 08/03/2016, 16h45

Bon, j'ai trouvé une solution, mais qui nécessite du javascript...
En utilisant la 2ème version du post précédent (avec img au lieu de background-image) j'ai modifié le html comme suit :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype>
<html>
<head>
	<title>test</title>
	<meta charset="iso-8859-1" />
	<link rel="stylesheet" href="....css" />
 
</head>
 
 
<body onload="main()">
      <div id="zoneMenu"> </div>
 
      <div id="zoneMain" >
	     <div id="containerMain">
		  <img id="fond" src="merJaune.jpg" />
                  <div class="boutonMenu">menu</div>
	     </div>
      </div>
 
<script> 
	var containerMain ;
 
	function gestionAffichageResponsive() {  
		if (window.innerHeight * 2 < window.innerWidth * 3) {
			containerMain.style.height = "100vh" ;
			containerMain.style.width = "66.6vh" ;
		} else {
			containerMain.style.width = "100vw" ;
			containerMain.style.height = "150vw" ;
		}	
	 }
 
	function main() {
		containerMain = document.getElementById("containerMain") ;
		gestionAffichageResponsive() ;
		window.addEventListener('resize', gestionAffichageResponsive, false);
	}
 
</script>
</body>

Ce faisant, l'image est placée dans la div "containerMain" qui est toujours au format 2/3 et qui occupe le maximum de place disponible, on peut donc donner à l'image une width et une height à 100%. Ensuite, cette div est centrée dans la div "zoneMain" définie comme un flex dans le css :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
body {
	background-color: black ;
	width: 96.6vh ; 
	height: 100vh ;
 	margin: 0 auto ;
}
 
#zoneMenu {
	 position: relative;
	 float: left;
	 width: 30vh ; 
	 height: 100vh;
}
 
#zoneMain {	
        width: 66.6vh ;
	height: 100vh;
	float: left;
	display: flex; 
	display: -webkit-flex;
	justify-content: center ;
	align-items: center; 
   	position: relative;
}
 
#containerMain { 
	width: 66.6vh ; 
	height: 100vh; 
	position: relative;	
}
 
 
#fond{
	position: absolute;
	max-height: 100% ;
	width: 100% ;
}
 
@media only screen and (orientation: portrait) {
 
	body {
		 width: 100%;
	}
 
       #zoneMenu { 
		display: none;
	}
 
	#zoneMain {
		float: none;
		width: 100% ;
	}		
}

Comme l'image est toujours contenue dans la div "containerMain" qui a la même dimension qu'elle, les éléments placées dans cette div et positionnés en % seront toujours placés au même endroit sur l'image

Si on veut mettre du texte sur l'image dont la taille suit la dimension de l'image, c'est moins immédiat, car la dimension du texte en % n'est pas relative à la dimension du container mais à la taille de la police de l'objet parent. Mais je pense qu'en définissant des tailles de texte en % avec des mediaquery et en ajustant la taille de la police de l'objet parent dans le script si besoin, on doit pouvoir s'en sortir...

Positionner précisément un élément au-dessus d'une image "responsive" et "contain"

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager