Adapter longueur/hauteur d'une image à une div.

DJsmileyus · 19 Novembre 2006

Bonjour,

J'ai actuellement un site internet où j'aimerais que les images d'une galerie s'adaptent automatiquement à la taille d'une 'div'. Un peu comme sur "http://imageshack.us/" où, une fois uploadées, les images s'adapent lorsqu'on rétrécit la fenêtre. On m'a dit que c'était possible en javascript mais je n'ai aucune connaissance en ce langage, que j'ai longtemps évité. :hypocrite:

Quelqu'un aurait-il une solution ?

Merci d'avance & bon fin de week-end !

kazhar · 19 Novembre 2006

Eh bien, tu modifie déjà la taille de ton div non ?

Donc, en faisant :

<img src="***" width="100%" />

Ton image devrait s'adapter directement à la taille de ton div.

DJsmileyus · 19 Novembre 2006

Merci bien de ta réponse, mais ce serait trop simple.

Lorsque qu'une image est inférieure à la taille de la "div", elle sera également en "100%". Il faut que seules les images plus grandes que la "div" soient redimensionnées.

ZeBrian · 19 Novembre 2006

Il me semble que ce code convient ! Tu peux définir la largeur du <div> ailleurs que dans la balise "style", ce n'est qu'un exemple...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">

function init(){
	var image=document.getElementById('image');
	var parent=image.parentNode;
	var maxWidth=parent.offsetWidth;
	var maxHeight=parent.offsetHeight;
	var ratio=image.width/image.height;
	if(ratio>=1 && image.width>maxWidth || ratio<1 && image.height>maxHeight){
		if(ratio>=1){
			var newWidth=maxWidth;
			var newHeight=maxHeight/ratio;
		}
		else{
			var newHeight=maxHeight;
			var newWidth=maxWidth*ratio;
		}
		image.width=newWidth;
		image.height=newHeight;
	}
}

</script>
</head>

<body onload="init()">

<div style="width:100px;height:200px">
	<img id="image" src="url.jpg" />
</div>

</body>
</html>

DJsmileyus · 19 Novembre 2006

Merci bien ZeBrian ! Ca fonctionne parfaitement

Seulement, un dernier petit détail : la div en quesiton n'a pas de propriétés "height", comment peut-on faire pour que seule la propriétés "width" soit prise en compte (et donc, que height soir diminué proportionnellement) ?

Encore une fois, merci.

ZeBrian · 19 Novembre 2006

De rien Je pense (mais je n'ai pas testé) que ceci convient :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">

function init(){
	var image=document.getElementById('image');
	var parent=image.parentNode;
	var maxWidth=parent.offsetWidth;
	var maxHeight=parent.offsetHeight;
	var ratio=image.width/image.height;
	if(image.width>maxWidth){
		var newWidth=maxWidth;
		var newHeight=maxHeight/ratio;
		image.width=newWidth;
		image.height=newHeight;
	}
}

</script>
</head>

<body onload="init()">

<div style="width:100px;height:200px">
	<img id="image" src="url.jpg" />
</div>

</body>
</html>

EDIT : En fait il me semble que le code précédent n'était pas correct si la largeur et la hauteur du <div> n'étaient pas les mêmes... Mais puisque le problème ne se présente plus ici, inutile de le corriger

Modifié 19 Novembre 2006 par ZeBrian

DJsmileyus · 19 Novembre 2006

Encore une fois, merci ZeBrian pour ton aide, c'est vraiment sympa !

Juste une précision qui servira aux personnes souhaitant un script similaire, il y a une légère erreur, ce n'est pas "var newHeight=maxHeight/ratio;" mais "var newHeight=maxWidth/ratio;".

Voilà, encore merci

& bonne continuation :

Connexion

Adapter longueur/hauteur d'une image à une div.

Sujets conseillés

DJsmileyus

kazhar

DJsmileyus

ZeBrian

DJsmileyus

ZeBrian

DJsmileyus

Veuillez vous connecter pour commenter

Parcourir

Activité