img拡大縮小サンプル

icon 項目のみ表示/展開表示の切り替え

img拡大縮小

　スマホ等、横の画素数が少ないデバイスの場合、縦横比を保ったまま、縮小表示する必要があります。
表示方法についていくつかサンプルを示します。なお表示している画像の元の大きさは520*480です。
　パソコンで見ている場合は、ブラウザのウィンドウサイズを変化させるとイメージがつかめると思います。

width,heightに50%を指定

<img src="image.png" width="50%" height="50%">

Tesx
　IE11,Edge,Chromeでは横幅が親要素の約50%、縦幅は縦横比を保って表示されました。
　Androidスマホでは横幅が親要素の約50%,縦幅が画面の約50%で表示されました。

max-widthに100%,heightにautoを指定

<style type="text/css">
img.img1 {
  max-width:100%;
  height:auto;
}
</style>
<img src="image1.png" class="img1">

Tesx
　IE11,Edge,Chrome,Androidスマホともに横幅は親要素幅、縦幅は縦横比を保った大きさで表示されました。
　親要素の幅より狭い場合は、拡大されずに等倍で表示されます。min-widthを指定すると拡大されます。

max-widthに100%,heightにautoを指定,widthとheightを指定

　スマホのように高解像度のデバイス向けに高解像度のデバイスを縮小して表示するためにwidthとheightを指定しています。
<img src="image1.png" class="img1" width="260" height="240">

Tesx
最大で幅260pxで表示され親要素の幅が狭い場合は縦横比を維持して縮小表示されます。

Javascriptによる拡大縮小

　画像がロードされたときにonloadイベントが発生します。このタイミングで画像の実際の大きさをnaturalWidth,naturalHeightで取得できます。実際に表示されている大きさはwidth,heightで取得できます。widthとheightを操作することにより拡大縮小ができます。ここでは50%で表示しています。
　親要素の幅は、イメージオブジェクト.parentNode.clientWidthで取得できます。 
<span id="text1">Tesx</span><br />

<script type="text/javascript">
function img2_onload(){
  var i=event.target;
  var p=i.parentNode;
  var t=document.getElementById('text1');
  i.width=i.naturalWidth/2;
  i.height=i.naturalHeight/2;
  var r=p.getBoundingClientRect();
  t.innerText='親要素幅'+p.clientWidth+'表示サイズ'+i.width+'*'+i.height+'元の大きさ('+i.naturalWidth+'*'+i.naturalHeight+')';
}

</script>
<img src="image1.png" class="img2" onload="img2_onload()"><br />

Tesx