HTML + Javascript: Dynamic Image Resize?

Question

Sto cercando di ottenere qualche JavaScript per regolare a livello di codice la larghezza di un HTML img di tag per visualizzare correttamente le immagini varie dimensioni.

Ho un tag larghezza fissa 800px a Safari per visualizzare un'immagine, questa è la larghezza massima.

Se l'immagine è più larga allora max-width voglio visualizzarlo a IE vasta;

Se l'immagine è inferiore a <=> vasta voglio preservare la sua larghezza per evitare stretching.

Io uso questo codice html / Javacript per ottenere una soluzione parziale:

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" />

Il codice di cui sopra sembra funzionare su tutti i browser che ho provato ad eccezione <=> (immagini non vengono visualizzate a meno che non si aggiorna la pagina).

So che posso usare i CSS <=> ma che non funzionerà su <=> <7 che è un tappo di spettacolo.

Come posso ottenere questo lavoro per tutti i browser? Molte grazie in anticipo.

Answer 1

Non ho mai visto un safari nel lavoro, ma si può provare a cambiare il vostro evento onload a questo:

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

E 'possibile che, senza un valore di ritorno, safari pensa che questo oggetto non deve essere caricato.

Answer 2

Utilizza il css IE6 + javascript mod:

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

Answer 3

Senza id:

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

Answer 4

Hai provato scimmia con img.style.width? Si potrebbe anche provare avere 2 classi CSS per ciascuna delle 2 condizioni e programmaticly cambiarli.