Images en responsive mode

Version imprimable

29/05/2018, 16h22
NouveauDev

Images en responsive mode
Bonjour,

Je suis en train de créer un petit site web et je désespère sur un souci ..

J'ai une image de fond que j'essai de mettre en responsive.
En cherchant j'ai trouvé un petit code pas trop mal, le souci est que quand je redimensionne ma fenêtre, la partie gauche de mon image est un peu "bouffé".
Donc premier problème.
Voici le code :
Code:

1 2 3 4 5 6 body{ margin :0; padding :0; background:url('mon image') no-repeat center fixed; background-size: cover; }
Ensuite, sur cette image, je met d'autres images cliquables.
Je les place mais une fois que je redimensionne ma fenêtre, mes images ne sont plus au bon endroit.
code HTML :
Code:

1 2 3 <div class="imgg"> <a Href="mapage.php"><img class="ImgClic" src="MonImg.jpg"/></a> </div>
Code css :
Code:

1 2 3 4 5 6 .ImgClic{ width : 5%; height: 5%; top : 40%; left: 20%; }
Quelqu'un pourrait m'aider à trouver une solution ?
29/05/2018, 17h02
vidia
Bonjour, alors tout d'abord ne fait pas confiance a ce que ton navigateur affiche, sans avoir correctement écrit tes instructions, je veux dire par la que certain de tes problèmes peuvent peut être résolu en écrivant ton code comme ceci :
Pour le premier :
Code:

1 2 3 4 5 6 body{ margin :0; padding :0; background:url('mon image.jpg') no-repeat center fixed; background-size: cover; }
Ici j'ai mis une extension a ton image, cela peut être .png etc ensuite pour le second code :
Code:

1 2 3 <div class="imgg"> <a href="mapage.php"><img class="ImgClic" src="MonImg.jpg"/></a> </div>
C'est href et pas Href.

Enfin pour la dernière portion de code :
Code:

1 2 3 4 5 6 7 .ImgClic{ width : 5%; height: 5%; position : /*ICI tu met relative, absolute, fixed */ top : 40%; left: 20%; }
Mettre des instructions top et left sans une position je ne vois pas l'interêt.

Voila change déja ca, je ne connais pas ton niveau en html-css d'ou mes réponses.. désolé si tu maitrise déja bien le sujet et de ce fait ton problème relève d'autre critères
30/05/2018, 08h14
NouveauDev

Bonjour et merci pour votre réponse.

Pour le premier, j'avais bien mis l'extension.
Pour le second j'ai bien mis href (erreur de recopie).
Pour le dernier en effet j'ai oublié de vous mettre la position.

Cependant j'ai toujours le souci avec le responsive...

Je vous remercie pour vos réponses.
30/05/2018, 09h44
NouveauDev
Bon, mon image en fond d'écran est responsive.
Code :
Code:

1 2 3 4 5 6 7 8 9 10 Body{ background:url('mon-image.jpg'); background-repeat: no-repeat; background-size: cover; width:100%; height:auto; padding-left:400px; margin:0; padding:0; }
L'image que je place dessus ne suit toujours pas l'image...

Imaginons que j'ai un fond d'écran "carte" et que je place une image "Point" sur Floride, j'aimerais que lorsque je réduis ma fenêtre, l'image "Point" reste sur Floride.
Ci dessus, le css de mon image "carte".
Si dessous, le css de mon image "Point".
Code:

1 2 3 4 5 6 7 8 9 .Point { width : 50px; height: 50px; position: relative; top : 610px; left: 500px; max-width: 40px; min-width: 40px; }
Quelqu'un pour m'aider ?
30/05/2018, 10h07
psychadelic

comprends pas, l'utilisation de l'instruction css background-position: center center; ne te plais pas ??
30/05/2018, 10h43
vidia

Si j'ai bien compris, en prenant ton exemple tu souhaite que l'on puisse cliquer sur l'état de floride uniquement sur une image de fond qui est une carte.
Pour ce genre de comportement en gardant le coté responsive, c'est particulier, je te conseil donc de te renseigner sur la balise HTML map et la balise area qui lui est associé et qui me semble convenir parfaitement a ton problème,tu devras également penser à ne pas mettre l'image en fond par css mais mettre l'image en passant par une balise img.

Un petit lien :
https://developer.mozilla.org/fr/doc...ML/Element/map

"L'élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions."
Autrement dit tu t'arrange pour rendre ton image responsive, et les area a l'interieur s'y adapte et seront responsives

SOLUTION 1 :

Le conteneur en position:relative;
L'image "de fond" doit être dans une balise <img /> pour que sa hauteur soit prise en compte, en width:100%,
Les icones cliquables en position:absolute; (là, l’icône peut être mise en background du <a>)
on positionne chaque icône par ses coordonnées (top / left) en % (par rapport à la grande image)

Exemple (Régions françaises) : https://codepen.io/jreaux62/pen/BVyoBY
(à compléter)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="conteneur">
 
  <div id="imgg">
    <img src="http://www.cartesfrance.fr/cartes/geographie/fond-carte-nouvelles-regions-large.jpg" />
    <a class="FR-ARA" href="mapage.php?region=FR-ARA"><span>Auvergne-Rhône-Alpes</span></a>
 
    <a class="FR-BRE" href="mapage.php?region=FR-BRE"><span>Bretagne</span></a>
 
    <a class="FR-COR" href="mapage.php?region=FR-COR"><span>Corse</span></a>
    <a class="FR-GES" href="mapage.php?region=FR-GES"><span>Grand Est</span></a>
    <a class="FR-HDF" href="mapage.php?region=FR-HDF"><span>Hauts de France</span></a>
    <a class="FR-IDF" href="mapage.php?region=FR-IDF"><span>Île-de-France</span></a>
 
    <a class="FR-NOR" href="mapage.php?region=FR-NOR"><span>Normandie</span></a>
 
  </div>
 
</div>

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
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
#imgg { position:relative; }
/* grande image */
#imgg > img { width:100%; }
/* pointeurs */
#imgg a { 
  position:absolute; 
  width:5%; 
  height:5%;
  background:url('https://cdn.pixabay.com/photo/2015/12/14/20/30/location-1093169_960_720.png') no-repeat;
  background-size:contain;
}
#imgg a:hover { 
  background-image:url('https://cdn.pixabay.com/photo/2015/12/14/20/29/tracker-1093167_960_720.png');
}
/* REGIONS */
#imgg a.FR-ARA {
  top:54%;
  left:65%;
}
#imgg a.FR-BRE {
  top:28%;
  left:21%;
}
/* ... */
#imgg a.FR-COR {
  top:84%;
  left:93%;
}
#imgg a.FR-GES {
  top:22%;
  left:72%;
}
#imgg a.FR-HDF {
  top:10%;
  left:54%;
}
#imgg a.FR-IDF {
  top:22%;
  left:52%;
}
/* ... */
#imgg a.FR-NOR {
  top:20%;
  left:37%;
}
/* ... */
 
/* noms des REGIONS */
#imgg a span { 
  position:absolute; 
  display:none; /* on masque */
  top:105%;
  width:200px; left:50%; margin-left:-100px; /* centrage horizontal */
  text-align:center;
}
#imgg a:hover span { display:block; /* on affiche */ }
 
/* ---------------------------- */
/* TEST */
#conteneur { width:50%; margin:0 auto; }
 
#imgg a, #imgg a span { 
  color:darkgreen;
  font-family:Arial,sans-serif;
  white-space:nowrap;
}

SOLUTION 2 :

<map> et <area> : il faut définir les coordonnées des contours de chaque région.
Ici : pas d'icônes, mais des "zones cliquables"

Il existe déjà des cartes toutes faites :

:google: "carte france responsive cliquable"

30/05/2018, 13h52
NouveauDev

Super merci pour votre aide !

Toujours au top !