11521 sujets

JavaScript, DOM et API Web HTML5

Superposer un div sur une image en relatif

Bonjour,
je désire positionner une image B au dessus d'une image A, en la calant en un point dont les coordonnées sont exprimés en pourcentage des largeur/hauteur de l'image B. je désire également que les dimensions de l'image B varie proportionnellement à l'image A lorsque je redimensionne par exemple la fenêtre du navigateur.
Actuellement le positionnement se fait par rapport à la fenêtre et non l'image A, et il me faut faire varier les dimensions de l'image B en fonction de celle de A
Merci pour un coup de main
Trachy


     
	#image_accueil{
	position:relative;top:0px;left:0px;
	}
	#image_accueil img {
   	 max-width: 100%;
    	height: auto;
	}
	#barre_media{
	position:absolute;
	top:10%;
	left:10%;
	z-index:4;
	}
	#barre_media img {
   	 max-width: 100%;
    	height: auto;
	}            
 

 <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Tourisme </title>
<link rel="stylesheet" type="text/css" media="all" href="libcss/cyb/PDF_accueil_windows.css" />
</head>

<body >
  	<div id="image_accueil" ><img src="PDF_accueil.jpg" /><div  id="barre_media"><img src="barre_media.jpg" /></div></div>		
</body>
</html>
erreur de frappe
"en la calant en un point dont les coordonnées sont exprimés en pourcentage des largeur/hauteur de l'image A" (et non B)
Modérateur
Salut !

Tu n'es pas loin. Ce qui manque a ton code c'est de donner une taille à #barre_media (comment veux-tu que l'image se resize en prenne 20% de son parent si tu ne lui dit pas ?). Sinon pour ton problème de positionnement par rapport à la fenêtre et non a l'image je dirait au contraire que #barre_media se positionne bien par rapport à #image_accueil (mais #image_accueil fait 100% de la taille de la fenêtre et est totu en haut donc ca se confond...)

Voila un exemple avec un conteneur en moins :
<div class="wrap">
  <img class="chaton" src="http://img.fac.pmdstatic.net/fit/http.3A.2F.2Fwww.2Efemmeactuelle.2Efr.2Fvar.2Ffemmeactuelle.2Fstorage.2Fimages.2Fanimaux.2Fveterinaire-les-conseils.2Fs-occuper-d-un-chaton-orphelin-06791.2F6142730-6-fre-FR.2Fcomment-s-occuper-d-un-chaton-orphelin.2Ejpg/345x258/crop-from/center/comment-s-occuper-d-un-chaton-orphelin.jpeg" alt="">
  <img class="pdf" src="http://www.visual-integrity.com/wp-content/uploads/2016/02/pdf-page.png" alt="">
</div>

.wrap {
  position:relative;
  width:50%;
}
  .chaton {
    width:100%;
  }
  .pdf {
    position:absolute;
    top:10%;
    right:10%;
    width:30%;
  }

https://jsfiddle.net/tthjjo2w/
Je te remercie, effectivement le conteneur n'était pas dimensionné.
Cependant, je ne désire pas que les images deviennent plus grandes qu'elles ne le sont lorsque l'on agrandit la fenêtre du navigateur, et j'ai un petit soucis avec la mise en place du max-width.
Voici le code modifié (j'ai enlevé le conteneur inutile).
Lorsque l'on agrandit la largeur de la fenêtre la barre_media se maintient bien à sa taille initiale, mais elle se décale vers la droite, le left 10% correspond ainsi à 10% de la largeur de la fenêtre et non de l'image de fond. Comment corriger cela ? Merci.

#image_accueil{
	position:relative;top:0px;left:0px;
	width:100%
	}
	.accueil{
   	 max-width: 100%;
    	height: auto;
	}
	.media{
	position:absolute;
	top:10%;
	left:10%;
	max-width: 15%;
	height: auto;
	z-index:4;
	}



<body >
  	<div id="image_accueil" ><img class="accueil" src="PDF_accueil.jpg" /><img class="media" src="barre_media.jpg" /></div>		
</body>
Modérateur
philippe77 a écrit :
Cependant, je ne désire pas que les images deviennent plus grandes qu'elles ne le sont lorsque l'on agrandit la fenêtre du navigateur, et j'ai un petit soucis avec la mise en place du max-width.


Effectivement, il y a une petit incompréhension je crois. Quand tu mets "max-width:100%;" celà indique que ton élément prendra au maximum 100% de son parent (ça ne veut pas dire qu'il sera à sa taille par défaut)

/* EDIT */
/* Mais tu avais bien compris. Si on ne met que "max-width:100%;" sans spécifier le width, l'image ne pourra pas s’agrandir et elle sera à sa taille initiale par défaut sauf si elle est plus grande que son parent auquel cas elle prendra 100% de la largeur du parent */

philippe77 a écrit :
Lorsque l'on agrandit la largeur de la fenêtre la barre_media se maintient bien à sa taille initiale, mais elle se décale vers la droite, le left 10% correspond ainsi à 10% de la largeur de la fenêtre et non de l'image de fond. Comment corriger cela ? Merci.


/* EDIT */
/* Ici le Problème c'etait juste que ton conteneur faisait 100% de la fenêtre. Le passer en inline-block le fera s'ajuster a son contenu. */

/* La je supprime l'explication tellement j'ai honte de moi ! */
Modifié par _laurent (19 Oct 2016 - 13:46)
Oui bien sûr tu as raison, je ne voulais pas mettre de valeur en px dans les css, puisque je réécris mes application en RWD mais c'est obligatoire, le parent de barre_media, ne pourra jamais être l'image mais son conteneur.
Merci encore. Smiley smile
Modifié par philippe77 (19 Oct 2016 - 12:17)
Modérateur
Ok philippe77, je tiens a m'excuser. J'ai relu mon message et j'ai dit de la merde. Manque de café certainement, j'ai pas beaucoup dormi... Je vais donc corriger ma réponse précédente.

En gros ton dernier code marche bien le seul truc qui cloche c'est le width:100%; de #image_accueil. Il suffit juste de le mettre en display:inline-block; afin qu'il prenne la taille de ton image. De cette façon la seconde image se calera sur le bord.

Deuxièmement, le max-width:100%; marche bien comme tu le pensais. Si tu ne donne pas de taille à l'image elle prendra sa taille par défaut et au maximum 100% de la largeur, mais pas plus grand.

Voila l'exemple encore mis a jour et sans aucune taille fixe : https://jsfiddle.net/tthjjo2w/3/

(Tu as raison c'est sale de mettre une taille fixe en px dans le code, c'est ce qui m'a poussé à relire)

Encore désolé, j’espère que je ne t'ai pas trop embrouillé


Bonne journée
Modifié par _laurent (19 Oct 2016 - 13:48)
Sujet clos
Aller à