2013-07-18 07:26:17
貼り付けた画像を表示の際にJavaScriptでリサイズしてしまう(見かけだけでファイルサイズは変わりません)というスクリプト。
横幅が指定サイズより大きい場合にサイズを変更します。
それに併せて縦サイズも変更されます(ただし、縮小比率の小数以下を切り捨てるので、縦横比が若干狂います)
ヘッダなどに下記を
スマホ向けだと余白を考慮して~300辺りかな、と思います。(縦表示の場合)
<script type="text/javascript">imgResize('200');</script>という感じで呼び出したい場合は、</body>の上辺りにでも。
解像度を取得してそれにあわせてと言うこともできるのではないかと。
尚、この例ではすべての画像(imgタグ)が指定サイズに縮んでしまいますので、部分的に行いたい場合、特定の環境に対してだけ行いたい場合には改良が必要となります。
横幅が指定サイズより大きい場合にサイズを変更します。
それに併せて縦サイズも変更されます(ただし、縮小比率の小数以下を切り捨てるので、縦横比が若干狂います)
ヘッダなどに下記を
<script type="text/javascript">で、bodyタグに onload="imgResize('200');" をつけておくと画像が指定した横幅に併せて縮小されます。
function imgResize(maxWidth)
{
if( String(maxWidth).match(/^\d+$/) )
{
var el = document.getElementsByTagName("img");
for(i=0;i<el.length;i++){
if(el[i].width > maxWidth)
{
el[i].height = Math.floor( el[i].height * maxWidth / el[i].width );
el[i].width = maxWidth;
}
}
}
}
</script>
スマホ向けだと余白を考慮して~300辺りかな、と思います。(縦表示の場合)
<script type="text/javascript">imgResize('200');</script>という感じで呼び出したい場合は、</body>の上辺りにでも。
解像度を取得してそれにあわせてと言うこともできるのではないかと。
尚、この例ではすべての画像(imgタグ)が指定サイズに縮んでしまいますので、部分的に行いたい場合、特定の環境に対してだけ行いたい場合には改良が必要となります。