HTML + Javascript: Dynamic Image Resize?

Question

Ich versuche, einige JavaScript zu bekommen, um programmatisch ein HTML-Tag img Breite anpassen richtig verschieden große Bilder anzuzeigen.

Ich habe eine feste Breite img Tag bei 800px um ein Bild anzuzeigen, ist dies die maximale Breite.

Wenn das Bild dann breiter 800px ich es bei 800px angezeigt werden soll breit;

Wenn das Bild kleiner als 800px breit ich seine Breite erhalten will, es zu vermeiden Stretching.

Ich benutze diesen html / Javacript Code eine Teillösung zu erhalten:

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

Der obige Code scheint, dass ich außer Safari getestet auf allen Browsern zu funktionieren (Bilder nicht angezeigt werden, wenn Sie die Seite aktualisieren).

Ich weiß, ich CSS max-width verwenden kann, aber das wird nicht funktionieren auf IE <7, die eine Show Stopper ist.

Wie kann ich diese Arbeit für alle Browser? Vielen Dank im Voraus.

Answer 1

Ich habe noch nie eine Safari in der Arbeit gesehen, aber Sie können versuchen, Ihr onload Ereignis diesen Wechsel:

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

Es könnte ohne Rückgabewert sein, dass Safari denkt, dass dieses Objekt nicht geladen werden.

Answer 2

Mit der IE6 CSS + JavaScript-Hack:

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

Answer 3

Ohne ID:

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

Answer 4

Haben Sie versucht, Affe mit img.style.width? Sie könnten auch versuchen, für jeden der 2 Bedingungen 2 CSS-Klassen mit und programmatisch Thema ändern.