画面の解像度に応じて画像を動的に変更します

Question

私は、JavaScriptデータ属性を介して読み込まれるフルスクリーンの背景画像を持つセクションを持っています。これは応答性の高いサイトであるため、画面のサイズに応じて同じ背景画像（1920 x 1080ピクセル）が拡大縮小されます。小さな画面サイズの携帯電話で

HTML：

<!-- BEGIN PAGE TITLE --> 
<section id="page-title" class="page-title-lg" data-bg-img="nature/full-20.jpg"> 
    <div class="container"> 
    <div class="page-title-wrapper"> 
     <div class="page-title-txt"> 
     <h1>Large Page Title</h1> 
     </div> 
    </div> 
    </div> 
</section> 
<!-- END PAGE TITLE --> 

JS：

// Image Background 
$('[data-bg-img]').each(function() { 
     var dataImg = $(this).attr('data-bg-img'); 
     $(this).css('background-image', 'url(assets/img/' + dataImg + ')'); 
}); 

動的ウィンドウサイズを検出し、異なるデータ属性を介して適切なイメージをロードする方法（例えば2560 xがあります1440,1920 x 1440,1280 x 800,640 x 960など）？

Answer 1

タブレット、デスクトップ、モバイルデバイスの3つの異なるイメージがある場合は、ロードする正しいイメージを自動的に選択する簡単なシステムを作成できます。

<section id="page-title" class="page-title-lg" data-bg data-bg-img-desktop="nature/full-20.jpg" data-bg-img-tablet="nature/full-20.jpg" data-bg-img-mobile="nature/full-20.jpg"></section> 

お知らせの4つの属性：データ-BGデータ-BG-IMG-デスクトップ、データ-BG-IMG-タブレット、データ-BG-IMG-モバイル。

するとページが読み込まれると、画面の幅を取得し、画面サイズに最も近い画像をロード：

<script type="text/javascript"> 

var imageBgs = document.querySelectorAll('[data-bg]'); 
var screenWidth = window.innerWidth; 

for(var i=0; i<imageBgs.length; i++) { 
    if(screenWidth < 768){ 
     // Load mobile image 
     imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-mobile')+')'; 
    } else if(screenWidth >= 768 && screenWidth <= 1024) { 
     // Ipad 
     imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-tablet')+')'; 
    } else { 
     // desktop image 
     imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-desktop')+')'; 
    } 
} 

</script> 

Answer 2

は、あなたが直接CSSを変更することはできません理由はありますか？

これについては、いくつかの方法があります。 1つの方法は、resizeイベントを聞き、それに応じてすべてのイメージを更新することです。ただし、jqueryを使用して、ページ読み込み中に各要素のメディアクエリを作成し、ブラウザがすべての情報を交換できるようにすることもできます。

はここでそれを行う方法を示すフィドルです：https://jsfiddle.net/czr41bqp/

基本的にあなたがで切り替えると、ここであなたのstyle要素を作成し、ヘッダに付加する各画面サイズのためにスタイルを追加します。もちろん、これには、イメージのすべてのバージョンをあらかじめ生成しておき、各イメージとサイズが一致する必要があります。

$(function() { 
    //define a template with all media queries we want to target 
    var mediaQueryTemplate = '\ 
    @media screen and (min-width:350px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/350x150) } \ 
    } \ 
    @media screen and (min-width:640px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/640x960) } \ 
    } \ 
    @media screen and (min-width:1280px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \ 
    } \ 
    @media screen and (min-width:1280px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \ 
    } \ 
    @media screen and (min-width:1920px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/1920x1440) } \ 
    } \ 
    @media screen and (min-width:2560px) { \ 
     #{{ID}} { background-image: url({{BASE_URL}}/2560x1440) } \ 
    } \ 
    '; 

    var $style = $('<style>'); 
    $style.appendTo('head'); 

    $('[data-bg-img]').each(function() { 
    //generate all media queries from the template for each image and add them to the style tag 

    var dataImg = $(this).attr('data-bg-img'); 
    var mediaQueries = mediaQueryTemplate.replace(/{{ID}}/g, this.id).replace(/{{BASE_URL}}/g, dataImg); 

    $style.text($style.text() + mediaQueries); 
    }); 
}); 

Answer 3

「src」属性を空白のままにして、画面の幅に応じて割り当てます。

windowSize = $("window").width(); 

if(windowSize >= 1000){ 
$("img").attr("src","bigFile.png") 
} 
if(windowSize <= 999 && windowSize >= 500){ 
$("img").attr("src","mediumFile.png") 
} 
if(windowSize < 499){ 
$("img").attr("src","mobileFile.png") 
} 

また、あなたのようなもの使用することができます

if(windowSize >= 1000){ 
    $("imageContainer").html("<img src="bigFile">); 
}