HTML + Javascript : Redimensionnement dynamique des images ?

Question

J'essaie d'obtenir quelques JavaScript pour ajuster par programme un code HTML img afin d'afficher correctement des images de différentes tailles.

J'ai une largeur fixe img tag à 800px pour afficher une image, c'est la largeur maximale.

Si l'image est plus large que 800px Je veux l'afficher à 800px large ;

Si l'image est inférieure à 800px large, je veux préserver sa largeur pour éviter de l'étirer.

J'utilise ce code html/javacript pour obtenir une solution partielle :

function resize_image(id) {
    var img = document.getElementById(id);
    var normal_width = img.width;
    img.removeAttribute("width");
    var real_width = img.width;
    if (real_width < normal_width) {
        img.width = real_width;
    } else {
        img.width = normal_width;
    }
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

Le code ci-dessus semble fonctionner sur tous les navigateurs que j'ai testés, à l'exception de Safari (les images ne s'affichent pas si vous ne rafraîchissez pas la page).

Je sais que je peux utiliser CSS max-width mais cela ne fonctionne pas sur IE < 7, ce qui est un comble.

Comment faire pour que cela fonctionne avec tous les navigateurs ? Merci d'avance.

Answer 1

Je n'ai jamais vu de safari en fonctionnement, mais vous pouvez essayer de changer votre événement onload en ceci :

onload="resize_image(self.id);return true"

Il se peut qu'en l'absence de valeur de retour, safari pense que cet objet ne doit pas être chargé.

Answer 2

Utilisez le hack IE6 css+javascript :

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

Answer 3

Sans id :

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

Answer 4

Avez-vous essayé le singe avec img.style.width ? Vous pouvez également essayer d'avoir 2 classes CSS pour chacune des 2 conditions et de les modifier par programme.