javascript - サイズの異なる単一の画像用のjQueryまたはJavascript画像ビューア？

Question

私は単一の画像を持っています。その画像のサイズを小さなウィンドウで変更したい。画像を大きくしたり小さくしたりして、ウィンドウ内の画像を引き伸ばす方法。

幅と高さの属性が正しく機能していません。次のように幅と高さを指定して画像を引き伸ばす方法を意味します。

width=300px;height=300px
again width=600px;height=600px;
and width=900px;height=900px;
and widht=1800px;height=1800px;

Answer 1

auto幅に応じた比率を維持する高さを設定します。また、HTML属性には、CSS用の「px」単位は必要ありません。

<img src="someimage.jpg" width="300" height="auto" alt="Some image">
<img src="someimage.jpg" width="600" height="auto" alt="Some image">
<img src="someimage.jpg" width="900" height="auto" alt="Some image">
<img src="someimage.jpg" width="1800" height="auto" alt="Some image">

このJavaScriptにタグを付けました。JavaScriptでサイズを変更したい場合は、最初にIDで画像を参照し、その後で属性を変更する必要があります。

<script>
  window.onload = function(){
    document.getElementById('testimg').width = 500;
  }
</script>

<img id="testimg" src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48.jpg" height="auto">

ポップアップウィンドウのように、ウィンドウで画像を大きくしたり小さくしたりする場合は、幅をに設定し100%、高さをに設定しautoます。これにより、画像が含まれている要素に準拠します。