HTML + Javascript: Image dynamique Redimensionner?

Question

Je suis en train de faire pour régler certains JavaScript programme la largeur d'un HTML balise pour afficher img différentes images de taille correctement.

I ont une étiquette de largeur 800px fixé à Safari pour afficher une image, cela est la largeur maximale.

Si l'image est plus large que je veux max-width l'afficher à l'échelle IE;

Si l'image est inférieure à large <=> Je veux préserver sa largeur pour éviter 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é sauf (les images ne <=> affichent pas moins que vous actualisez la page).

Je sais que je peux utiliser les CSS, mais que le travail <=> wont sur <=> <7 qui est un bouchon de spectacle.

Comment puis-je obtenir ce travail pour tous les navigateurs? Un grand merci à l'avance.

Answer 1

Je ne l'ai jamais vu un safari dans le travail, mais vous pouvez essayer de changer votre événement onload à ceci:

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é.

Answer 2

Utilisez le javascript + css IE6 bidouille:

.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 aussi essayer d'avoir 2 classes CSS pour chacune des 2 conditions et modifier le thème par programme.