HTML + Javascriptを：動的イメージのサイズ変更しますか？

Question

私はプログラム的に正しく、さまざまなサイズの画像を表示するためのHTML JavaScriptタグの幅を調整するためにいくつかのimgを取得しようとしています。

私は画像を表示するimgで固定幅800pxタグが、これは最大幅である。

私は広い800pxでそれを表示したい800px画像はその後、幅が広い場合は、

画像が800px未満の場合は、

広い私はそれをストレッチ避けるために、その幅を維持したい。

私は部分的な解決策を得るために、このHTML / javacriptコードを使用します：

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

Answer 1

私は仕事でサファリを見たことがありませんが、あなたはこれまであなたのonloadイベントを変更してみてくださいすることができます：

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

これは、戻り値なしで、サファリは、このオブジェクトがロードされるべきではないと考えている可能性があります。

Answer 2

IE6のCSS + JavaScriptのハックを使用します：

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

Answer 3

IDなします：

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

Answer 4

あなたはimg.style.widthと猿を試みたことがありますか？あなたはまた、2つの条件のそれぞれについて、2つのCSSクラスを持ってみてくださいとprogrammaticlyそれらを変更することができます。