web-dev-qa-db-ja.com

CSSの背景画像に相当するsrcsetはありますか

img属性とsrcset属性は、レスポンシブ画像を作成する優れた方法のように見えます。 css background-imageプロパティで機能する同等の構文はありますか？

HTML

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

CSS

.mycontainer {
    background: url(?something goes here?);
}
htmlcssbackground-imagesrcset
72
Martin Algesten

image-set は同等のCSS機能です。同等のsrcset機能（ディメンションに従ってリソースを定義）を仕様に追加する必要があります。

現在、Safariで実装されているのは、ChromeおよびOperaプレフィックスが-webkit-で、x記述子のみをサポートしています。

72
Yoav Weiss

かなり確実に：

background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

同じように機能します。ブラウザは画像を調べ、どれが最適かを確認し、その画像を使用します。

20
SRing

ポリフィルの場合、正しいイメージサイズをダウンロードするためのメカニズムとしてsrcsetでimgを使用し、JSを使用してそれを非表示にし、親要素の背景画像を設定できます。

ここにフィドルがあります： http://jsbin.com/garetikubu/edit?html,output

onloadを使用し、JSをブロックスクリプトとして<head>に配置することが重要です。スクリプトを後で（たとえば、<body>の最後に）配置すると、ブラウザによってimg.currentSrcがまだ設定されていない競合状態を取得できます。ロードされるのを待つのが最善です。

この例では、ダウンロードされている元のimgを確認できます。 CSSで簡単に隠すことができます。

9
Weston

目的に合わせてメディアクエリを使用できます。これは簡単です：

.mycontainer {    
    background-image:url("img/image-big.jpg"); // big image   
}

@media(max-width: 768px){
   .mycontainer {
        background-image:url("img/image-sm.jpg"); // small image  
    }
}

そして、メディアクエリをサポートするすべてのブラウザで動作すると思います;）

5
gtamborero

率直に言ってより堅牢な別のアプローチは、背景画像の特性とオプションをsrcset属性を持つ画像に適合させることです。

これを行うには、画像の幅を100％に設定します。高さ：100％;オブジェクト適合：カバーまたは封じ込め。

以下に例を示します。

.psuedo-background-img-container {
  position: relative;
  width:400px;
  height: 200px;
}
.psuedo-background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="psuedo-background-img-container">

<img class="psuedo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">

</div>

これは誰にとっても最良のアプローチではないかもしれませんが、javascriptの回避策なしで最も望ましい結果が得られると思います。

5
Parks

<picture>要素を使用した同様のソリューション： Tutorial here

チュートリアルの場合：

同じ画像を小さい画面サイズに使用すると、画像の主要な被写体のサイズが小さくなりすぎるのではないかと疑っています。別の画面サイズで別の画像（より主要な被写体に焦点を合わせた）を表示したいのですが、デバイスとピクセルの比率に基づいて同じ画像の個別のアセットを表示したいので、高さと幅をカスタマイズしますビューポートに基づく画像。

サンプルコード：

<picture>

<source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">

<source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">

<img src="space-needle.jpg" alt="Space Needle">

</picture>
3
Piotr Ścigała

Foundationフレームワーク（ https://foundation.zurb.com/ ）を使用している場合、そのためにInterchangeプラグインを使用できます。

<div data-interchange="[assets/img/interchange/small.jpg, small], 
                       [assets/img/interchange/medium.jpg, medium], 
                       [assets/img/interchange/large.jpg, large]">
</div>

https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images

2
Martti Hyvönen

@ Weston の回答に基づいて、より一般的なjQueryソリューションを構築しました。基本的には、JSとCSSをコピーして貼り付け、HTML部分に集中できます;）

TL; DR-フィドル： https://jsfiddle.net/dpaa7oz6/

CSS

...読み込み中に画像がほとんど見えないようにする

.srcSet{
  position: fixed;
  z-index: 0;
  z-index: -1;
  z-index: -100;
  /* you could probably also add visibility: hidden; */
}

JS/jQuery

このスクリプトは、srcSetクラスを持つすべての画像を処理し、load（またはサポートされていない場合はcurrentSrc）を受け取るsrcイベントをバインドし、background-image CSSとしてbgFromSrcSetクラスを持つ最も近い親。

それ自体では十分ではありません！したがって、windowにも間隔チェッカーを配置しますloadイベントは、ロードイベントが完了したかどうかをテストし、完了していない場合は、それらをトリガーします。 （imgloadイベントは非常に頻繁にトリガーされます初回ロード時のみ、次のロード時、画像ソースを取得できますキャッシュから、imgロードイベントが起動されない！）

jQuery(function($){ //ON DOCUMENT READY
  var $window = $(window); //prepare window as jQuery object

  var $srcSets = $('.srcSet'); //get all images with srcSet clas
  $srcSets.each(function(){ //for each .srcSet do...
    var $currImg = $(this); //prepare current srcSet as jQuery object

    $currImg
      .load(function(){ //bind the load event
          var img = $currImg.get(0); //retrieve DOM element from $currImg

          //test currentSrc support, if not supported, use the old src
          var src = img.currentSrc ? img.currentSrc : img.src;

          //To the closest parent with bgFromSrcSet class,
          //set the final src as a background-image CSS
          $currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");

          //remove processed image from the jQuery set
          //(to update $srcSets.length that is checked in the loadChecker)
          $srcSets = $srcSets.not($currImg);

          $currImg.remove(); //remove the <img ...> itself 
      })
    ;      

  });

  //window's load event is called even on following loads...
  $window.load(function(){    
    //prepare the checker
    var loadChecker = setInterval(function(){
        if( $srcSets.length > 0 ) //if there is still work to do...
            $srcSets.load(); //...do it!
        else
            clearInterval(loadChecker); //if there is nothing to do - stop the checker
    }, 150);  
  });

});

HTML

...次のようになります。

<div class="bgFromSrcSet">
  <img class="srcSet"
       alt=""
       src="http://example.com/something.jpeg" 
       srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
       sizes="(max-width: 2000px) 100vw, 2000px"
  >
  Something else...
</div>

注：class bgFromSrcSet mustnotに設定する必要がありますimgそのもの！ img DOM親ツリーの要素にのみ設定できます。

2
jave.web