Aller au contenu

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


DJsmileyus

Sujets conseillés

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 ! :)

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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. :)

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

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. :)

Lien vers le commentaire
Partager sur d’autres sites

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 :P

Modifié par ZeBrian
Lien vers le commentaire
Partager sur d’autres sites

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 : :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...