1

達成したい単純なタスクが 1 つあります。
可変幅のコンテナに画像があります。
コンテナーの幅は、300、400、700、または 900 ピクセルにすることができます。これは、メディア クエリによって行われます。イメージは、そのコンテナーの幅全体を占有する必要があります。したがって、幅も 300、400、700、または 900 ピクセルになります。画像には、そのすべての幅の値に対して異なるソースが必要です。そのため、携帯電話で小さな画像を提供できます。

これは、おそらく属性の助けを借りてsrcset、要素の属性で実行できると思いました。幅はこんな感じimgsizes

<img src="http://dummyimage.com/300x200/abc/000" 
      alt="dummy" 
      srcset="
        http://dummyimage.com/900x200/abc/000 900w, 
        http://dummyimage.com/700x200/abc/000 700w, 
        http://dummyimage.com/400x200/abc/000 400w, 
        http://dummyimage.com/300x200/abc/000 300w
      " 
       />

しかし、ブラウザは画像自体の幅ではなく、ディスプレイポートの幅に比例して画像を選択するため、そのようには機能しません。http://scottjehl.github.io/picturefill/
のピクチャーフィル ポリフィルを使用した例: http://codepen.io/HerrSerker/pen/itBJy。次のサイズの 1 つの画像を取得するため、これは機能しません。

もちろん、それを考慮して、srcsetをこれに変更することもできます

      srcset="
        http://dummyimage.com/900x200/abc/000 999999w, 
        http://dummyimage.com/700x200/abc/000 900w, 
        http://dummyimage.com/400x200/abc/000 700w, 
        http://dummyimage.com/300x200/abc/000 400w
      "

これはデスクトップでは機能しますが、Retina ディスプレイでは失敗します。これは、ここではデバイスのピクセル比が考慮されるためですが、メディア クエリとは異なる方法で行われます。また、画像はビューポートの幅と同じ幅をコンパイル時に知っている必要があるため、役に立ちませんか? とんでもない。イメージ グリッド システムでイメージを使用します。デスクトップ デバイスの 3 列グリッドとスマートフォンの 1 列グリッドでは、画像の幅が異なります。幅とビューポート幅の比率を計算するのは、画像の責任ではありません。

sizes私は属性にも運がありませんでした（ここに例はありません）。理由は上記と同じです。サイズ属性では、メディアクエリに従って画像を広くする必要があるビューポート幅の量を指定します。これはとてもオフです。画像はどのように知る必要がありますか？

だから私はこの解決策を考え出しました。data-srcsetsrcset 属性自体と同じ構文で属性をセットアップしますが、カスタム JavaScript プログラミングを使用します。例: http://codepen.io/HerrSerker/pen/tCqJI

jQuery(function($){
  var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
  var regw = /(.*)w/;
  var sets, $set, set, myMatch, i, w, that, last;

  var checkData = function() {
    $('img[data-srcset]').each(function() {
      that = $(this);
      $set = that.data('srcset');
      sets = [];
      while(myMatch = reg.exec($set)) {
        set = {};
        set.src = myMatch[1];
        set.w = (myMatch[2].match(regw))[1];
        sets[set.w] = set;
      }
      w = that.width();
      last = 0;
      for (i in sets) {
        last = i;
        if (w <= i) {
          that.attr('src', sets[i].src);
          return;
        }
      }

      that.attr('src', sets[last].src);
    });
  };


  checkData();
  $(window).on('resize', checkData);
});

これは機能しますが、気分が悪いです。しかし、そうではないかもしれません。仕様では、レスポンシブ イメージがまさにそのように動作すると述べているためです。しかし、それは間違った方法だと感じています。レスポンシブ イメージのユース ケースの 90% は、この仕様では機能しません。

だから私は間違っていますか？定義された方法で srcset を使用しませんでしたか? 仕様を間違って理解しましたか? そして、W3C とレスポンシブ イメージ コミュニティ グループは、現実とはかけ離れた考え方をしているのでしょうか?

4

2 に答える 2

1

小さい画像は大きい画像の縮小版ですか? それともトリミングされていますか (アートディレクション)? 後者の場合は、 と を使用する必要がpictureありsource mediaます。

ブラウザがどの画像をダウンロードするかを決定するためにビューポートのみを使用する理由は、ブラウザが画像をダウンロードしたいときに利用できる唯一のものだからです。CSS (おそらく) はまだダウンロードされていません。したがって、srcset+を使用する場合sizesは、ブレークポイントと画像の幅を で繰り返す必要がありますsizes。

于 2014-10-06T06:57:47.850 に答える