【JS初心者向け】画像の縦横比でスタイルシートを変える方法

ホームページは今やCMSが当たり前の時代。また、スマホに対応するためにレスポンシブデザインやリキッドレイアウトを採用される場合も多いかと思います。CMSを導入することは、画像の編集などができないクライアントの場合でも、ただ画像をアップロードするだけできっちり表示されないといけないというのが基本だと思います。

記事の部分での画像の配置は、スマホなどにも考慮してimgにwidth：１００％とheight：autoなどを使うのが一番簡単なのですが、これだと、最近のサイドバーがないレイアウトや大きいサイズのPCモニターなどでは特に縦長の画像がえらく大きく見えたりする場合がありますね、ブラウザの縦幅いっぱいになったりと。製作者がきちんと考えてくれればまあいいのですが、それをどうやったらいいのかわかんねーって方に簡単な方法をご紹介します。

だいたいコピペで結構です。

Javascriptサンプル

<script>
	$(window).load(function (){
    // ↓ここに幅を変更したいクラスなど入れる
    $('.クラス名など img').each(function(){
        var img_height = $(this).height();
        var img_width  = $(this).width();
        var img = new Image();
        img.src = $(this).attr('src');
        var _width = img.width;
        var device_width = $(window).width();
 //横÷縦の値が１以上、つまり横長の場合
        if((img_width / img_height) >= 1){
//.css(ここに挿入以下サンプル）
            if(_width <= device_width){
                $(this).css("width", "auto");
            }else{
                $(this).css("width", "100%");
            }
            $(this).css("max-width", "100%");
        }else{
            // そのほかの場合（縦長の場合）こんな感じ
            $(this).css({"max-height": "400px","margin":"0 auto","width":"auto","display":"block"});
            if($(this).width() >= device_width){
                $(this).css("width", "100%");
            }else{
                $(this).css("width", "auto");
            }
        }
    });
});
</script>

必要なサイズとかは適宜変更してください。

もしこの処理をPCのみにしたい場合（スマホでは反映させたくない）は、

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

}

{と}の中に上のjsを挿入してください（いくらなんでもわかりますか）

ちなみに!を外すとスマホの場合になります。（いくらry）