ウィンドウの幅を変えると画像の大きさが自動調整される[JQuery]

img の自動調整でメディアクエリをもっと簡単に

$(function(){
    $('#main_img img').on('load',function(){
      $(this).css({
        'width':'100%',
        'height':'100%',
      })
    });
    $(window).resize(function(){
      $('#main_img img').css({
        'width':'100%',
        'height':'100%',
      })
    });

解説

HTML

画像を収納する #main_img の子要素に img で画像を挿入する

JQuery

• $(‘#main_img img’).on(‘load’,function(){ }); = main_img タグ内の img がロード完了した時に機能する
• $(this).css({ ‘width’ : ‘100%’ , ‘height’ : ‘100%’ }); = 先ほどの img に CSS を付与するサイズは 100% に設定しているが、任意のサイズに変更
• $(window).resize(function(){ }) = window のサイズが変更される度に function(){ } 内の処理を行う