Tweet

iPhone用のサイトを作るとき画像をそのまま流用すると、iPhoneの画面（320px × 480px）よりも大きい画像がはみ出てしまう。「【MovableType】iPhone用テンプレートの導入」でこのブログのiPhone対応を行ったのだが、このテンプレートにはその対策としてmax-widthタグが使われていた。

.entry img {
    max-width: 95% !important;
}

しかし、これでは幅が縮められるだけなので縦長の画像になってしまう。縦横比を保ったまま縮小する方法を探したのだが、CSSのみでは難しいようだ。以下のサイトを参考にしつつJavascriptで書いてみた。

iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone – bute_lab.

http://www.bute-studio.com/lab/2009/11/iphone-imgwidth.html

max-widthとアスペクト比 – 報國挺身日記

http://d.hatena.ne.jp/kkos/20091219/1261190288

ImageSizeChanger

機能

ページを読み込んだとき、及びiPhoneの向きを変えたときに、画像を指定のサイズへリサイズします。サイズの初期設定は画面幅 - 20px、つまり300px（縦向き）、460px（横向き）です。

iPhoneを縦にしたところ

横に倒したところ

使い方

ファイルを<script>タグで読み込んだ後、ImageSizeChanger.set();で起動します。スクリプトはHTMLソースのどこに書いても構いません。

例

<script type="text/javascript" src="https://blog.delphinus.dev/m/ImageSizeChanger.js"></script>
<script type="text/javascript">
// 画像のサイズを（画面幅 - 10px）にする
ImageSizeChanger.config.margin = 10;
// ISCを起動する
ImageSizeChanger.set();
</script>

ソース&ダウンロード

ダウンロード

/*
 * ImageSizeChanger
 * https://blog.delphinus.dev/2010/04/image-size-changer.html
 *
 * @version
 * 1.0.0 (April 6 2010)
 *
 * @copyright
 * Copyright (C) 2010 delphinus <[email protected]>
 */
if ( ! window.ImageSizeChanger ) var ImageSizeChanger = function() {

var isc = {
    // configuration
    config: {
        /* Resize image width to
         * ( portraitWidth or landscapeWidth ) - margin.
         * For iPhone, it makes 300px or 460px.
         */
        margin: 20
        ,portraitWidth: 320
        ,landscapeWidth: 480
    }

    ,items: null

    ,getItems: function(){
        if ( ! isc.items ) isc.items = function() {
            var m, i
                ,images = document.getElementsByTagName( "img" )
                ,items = new Array()
            ;
            for ( i = 0; i < images.length; i++ ) {
                m = images[ i ];
                items.push( {
                    originalWidth: m.width
                    ,originalHeight: m.height
                    ,img: m
                } );
            }
            return items;
        }();
        return isc.items;
    }

    ,setSize: function() {
        var w, h, m, i
            ,items = isc.getItems()
            ,config = isc.config
            ,maxWidth = Math.abs( window.orientation ) === 90
                ? config.landscapeWidth - config.margin
                : config.portraitWidth - config.margin
        ;
        for ( i = 0; i < items.length; i++ ) {
            m = items[ i ];
            w = m.originalWidth;
            h = m.originalHeight;
            if ( w > maxWidth ) {
                m.img.width = maxWidth;
                m.img.height = h * maxWidth / w;
            }
        }
    }

    ,set: function() {
        var f = isc.setSize;
        window.addEventListener( "load", f, false );
        window.addEventListener( "orientationchange", f, false );
    }
};

return isc;

}();