1488 sujets

Web Mobile et responsive web design

[Résolu] Image sur image

Bonjour,
Je me heurte à un pb de "responsivité". Des questions sur le positionnement, sur le "responsive" sont nombreuses mais je n'ai pas aperçu dans mes recherches de questions allant dans mon sens.
Sur une page web je souhaite afficher une image qui prendra tout l'écran (ou ça taille réelle, comme ce code actuel qui fonctionne)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>NOS ROADTRIPS</title>
<style>
#parent {position:relative;}
img {max-width:100%; height:auto;}
img.fond {position:absolute; top:50%; left:50%; transform:translate(-50%);}
img.retour {position:absolute; left:50%; transform:translateX(-50%);}
#img_1 {z-index:10;}
#img_2 {z-index:30;}
@media all and (max-width:1600px) {
	#img_2 {width:150px;}
@media all and (max-width:1060px) {
	#img_2 {width:100px;}
</style>
</head>
<body>
<div id="parent">
	<img id="img_1" class="fond" src="2017-2025-NOS_ROADTRIPS.jpg" alt="2017-2025 NOS ROADTRIPS">
	<a href="https://sosnoobs.fr/"><img id="img_2" class="retour" src="retour.gif" alt="RETOUR"></a>
</div>
</body>
</html>

Maintenant, sur cette image je voudrais y coller de petites "images-liens" (des gif) qui me renvoient vers d'autres pages du site.
C'est là que je bloque. Si je change de résolution d'écran, autant mon image principale est "responsive", autant mes "images-liens" restent figées, à leur emplacement, mais à leur taille réelle. D'où ma question : Est-il possible de rendre tout ça "responsive" ?
Merci
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {text-decoration:none;}
.container {position:relative;}
.one {position: absolute; top: 20%; left: 75%;}
.two {position: absolute; top: 42%; left: 25%;}
</style>
</head>
<body>
<div class="container">
  <img src="https://sosnoobs.fr/GPX/2017-2025-NOS_ROADTRIPS.jpg" alt="" style="width:100%">
  <div class="one"><a href="https://sosnoobs.fr/usa201708.php"><img src="https://sosnoobs.fr/GPX/201708.gif" alt="201708"></a></div>
  <div class="two"><a href="https://sosnoobs.fr/usa201806.php"><img src="https://sosnoobs.fr/GPX/201806.gif" alt="201806"></a></div>
</div>
</body>
</html>
salut
comme çà tout est proportionnel


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
text-decoration:none;
}
.container {
position:relative; 
width: 100%;
}
.imgfond {
width: 100%;
height: auto;
}
.gifone {
position: absolute; 
top: 20%; 
left: 75%;
width: 10%;
height: auto;
}
.giftwo {
position: absolute; 
top: 42%; 
left: 25%;
width: 10%;
height: auto;
}
</style>
</head>
<body>

<div class="container">

  <img src="https://sosnoobs.fr/GPX/2017-2025-NOS_ROADTRIPS.jpg" class="imgfond" alt="">

  <a href="https://sosnoobs.fr/usa201708.php"><img src="https://sosnoobs.fr/GPX/201708.gif" class="gifone" alt="201708"></a>
  <a href="https://sosnoobs.fr/usa201806.php"><img src="https://sosnoobs.fr/GPX/201806.gif" class="giftwo" alt="201806"></a>

</div>

</body>
</html>

Modifié par drphilgood (24 Apr 2025 - 18:05)
Meilleure solution
Merci drphilgood ... super. Et ça fait un moment que je planche la-dessus. J'ai juste modifié le "width" à 5% pour que le lien ne soit pas trop disproportionné par rapport au circuit.
Encore merci ... Smiley good
Prévenir un modérateur
Répondre au sujet
Aller à