HTML + Javascript: Dynamique de l'Image Redimensionner?

Je suis en train d'essayer d'obtenir quelques JavaScript de programmation pour régler un HTML img tag de la largeur de l'affichage de plusieurs images de taille correctement.

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

Si l'image est plus large puis 800px je veux l'afficher à 800px de large;

Si l'image est de moins de 800px large je veux préserver sa largeur afin d'éviter l'étirement il.

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

JS:

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;
	}
}

HTML:

<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é à l'exception Safari (les images ne s'affichent pas, sauf si vous actualisez la page).

Je sais que je peux utiliser les CSS max-width mais qui ne fonctionneront pas sur IE < 7, qui est un show stopper.

Comment puis-je obtenir ce travail pour tous les navigateurs? Merci beaucoup à l'avance.

InformationsquelleAutor QAZ | 2008-12-16
  1. 3

    Je n'ai jamais vu un safari dans le travail, mais vous pouvez essayer de changer votre événement onload pour cela:

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

    Il se pourrait que, sans une valeur de retour, safari pense que cet objet ne doit pas être chargé.

    InformationsquelleAutor bezmax
  2. 2

    Utiliser le IE6 css+javascript hack:

    .dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}
    • Cela a un coût, de sorte que vous ne pouvez pas avoir un tas d'entre eux sur la page.
    • Hm, je viens de le tester et devinez quoi, cette expression est évaluée sur les événements possibles. Et j'ai été naïf de croire qu'elle évalue qu'une seule fois...
    InformationsquelleAutor bezmax
  3. 1

    Sans id:

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

    Avez-vous essayé de singe avec img.style.width? Vous pouvez également essayer d'avoir 2 classes CSS pour chacun des 2 conditions et programmaticly les changer.

    InformationsquelleAutor sblundy