【コピペ】スマホ表示で全画像サイズを一括でデザイン通りの横幅にする方法

例えば、デザインデータが750pxだとして、各画像をスライスした際に、すべての画像が750pxの横幅に対しての大きさになるので、その画像一つ一つにcssでwidth:〇〇vw;のように記載していかなければならないときがありますね。

そんな面倒なことはせず、jQueryで一括変換してしまいましょう。

まず対象の画像にclassを付与します。

html

<img src="https://xxxx/img/img.jpg" class="img_half" alt="">

css

.img_half{
opacity:0;
}
@media screen and (min-width: 768px) {
  .img_half {
    width: auto !important;
  }
}
@media screen and (max-width: 767px) {
  .img_half {
    max-width: none !important;
  }
}

jQuery

function img_half() {
  var windowWidth = parseInt($(window).innerWidth());
  if(windowWidth < 768) {
    //ブレイクポイントが767の場合
    $('.img_half').each(function(){
      $(this).css({'width':'auto','height':'auto'});    
      var imgW = $(this).innerWidth();
      $(this).css({'width':(imgW / 750 * windowWidth) + 'px','height':'auto'});
      //750を、デザインの横幅のpxに変更
    });
  }else{
    $('.img_half').each(function(){      
      $(this).css({'width':'auto','height':'auto'});
    });
  }
}

//読み込み時に実行
$(window).on('load',function(){
  img_half();
  $('.img_half').css('opacity','1');
});
//リサイズ時に実行
$(window).resize(function () {
  img_half();
});

これでスマホの際はデザインの横幅に対して正しい比率ですべての画像にwidthが付与されます。