ウィンドウの幅を変えると画像の大きさが自動調整される[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(){ } 内の処理を行う
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。