例えば、デザインデータが750pxだとして、各画像をスライスした際に、すべての画像が750pxの横幅に対しての大きさになるので、その画像一つ一つにcssでwidth:〇〇vw;のように記載していかなければならないときがありますね。
そんな面倒なことはせず、jQueryで一括変換してしまいましょう。
まず対象の画像にclassを付与します。
html
|
1 |
<img src="https://xxxx/img/img.jpg" class="img_half" alt=""> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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(); }); |