0
Je me suis aperçu que certaines images trop grandes gachaient le style css de certaines pages si leur dimensions dépassaient celles de leur conteneurs (div).
La 1ère solution fut d'ajouter la propriété/valeur overflow:auto en CSS afin d'afficher un "ascenseur" pour les conteneurs (div) possédant des images trop grandes.
Solution pratique mais pas vraiment classe car le contenu entourant ces images défilent également avec cet ascenseur.
La 2ème solution est d'ajouter la propriété max-width en CSS : Cela fonctionne pas sur tous les navigateurs.
La 3ème solution est de redimensionner les images trop grandes au chargement de la page.
Facile : en javascript (je cherche même pas en PHP avec getimagesize() car trop de requêtes server).
Impeccable si dans le code HTML le tag img contient la propriété width
CODE
<img src="http://developpeur.mediabox.fr/images/logo.png" width="510" height="146" alt="developpeur image" />
Cependant, s'il n'y a aucune propriété width, comment l'obtenir ?
Même en faisant le parcours des élément image du document avec document.images ou document.getElementsByTagName('img') ... je n'arrive pas à obtenir la valeur exacte ...
CODE
function reduce_images(new_width)
{
var images = document.images;
var img = null;
for (var i = 0; i < images.length; i++)
{
img = images[i];
if(img.width > new_width)
{
while(img.width > new_width)
{
img.width -= 10;
img.height -= 10;
}
img.onclick=function(){new_window=window.open(this.src,'new_resized_img','')}
}
}
}
{
var images = document.images;
var img = null;
for (var i = 0; i < images.length; i++)
{
img = images[i];
if(img.width > new_width)
{
while(img.width > new_width)
{
img.width -= 10;
img.height -= 10;
}
img.onclick=function(){new_window=window.open(this.src,'new_resized_img','')}
}
}
}
Merci pour vos réponses
