11

w 構文をサポートするブラウザーに応答性の高い画像リソースを提供しながら、iOS8 クライアントに高 dpi 画像を提供する方法を見つけようとしています。W3C 標準によれば、1 つの srcset 属性に両方の構文を混在させることができるはずです。

<img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">

(出典: http://drafts.htmlwg.org/srcset/w3c-srcset/ )

ただし、Chrome 38 (OS X、高 dpi なし) でその例を実行すると、他の場合に w 構文をサポートするブラウザーは、ビューポートのサイズに関係なく、常に最大の画像 (banner-HD.jpeg) を読み込みます。追加すると

banner.jpeg 1x

Chrome はそのイメージを使用しますが、100w のイメージは無視します。

私の場合、イメージの小さいバージョンと、両方の 2x リソースを指定したいと思います。

<img src="default.png"
    srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">

これは、 w 構文をサポートしていないため、 medium@2x.png を選択する 2x iOS8 デバイスで動作するようです。ただし、Chrome はまだ気にしていないようで、ビューポートのサイズに関係なく medium.png をロードします。

ここで何か間違ったことをしていますか、それとも Chrome の srcset の実装における既知の問題ですか?

4

2 に答える 2

19
  1. 他のブラウザが何をするか見ないでください。それを正しく行っているのはChromeだけです（そしてFF 38+）。
  2. このドラフトを見ないでください。実装されておらず、実装されません。これが正しいものです：https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset

aw 記述子は常に ax 記述子に計算されるため、1 つの記述子に x と w を混在させることは無効であり、ブラウザはこれらの候補を削除します。

<!-- invalid -->
<img srcset="a.jpg 1x 300w, b.jpg 2x 600w" />

さまざまな候補の aw 記述子と x を混在させることは、ブラウザーによって使用/解析されますが、無効であり、すべてのケースの 99% で意味がありません。

<!-- makes no sense: -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="100vw" />

<!-- would make sense, because sizes is static in layoutpixel defined (i.e. 600 / 300 = 2x): -->
<img srcset="300.jpg 1x, 600.jpg 600w" sizes="300px" />

これは、w 記述子を使用すると自動的に retina にも最適化されるため、追加の x 記述子を使用する必要がないことを意味します (つまり、480w 2x = 960w)。

さらに、aw ディスクリプタを使用するほとんどの場合、デフォルト/フォールバック イメージも srcset で定義する必要があります。

<img src="small.png"
    srcset="small.png 480w, mediumg.png 640w, large.png 960w"
    sizes="100vw" />
  1. respimage polyfillを試す
于 2014-11-14T19:13:57.323 に答える
7

やりたいことは、picture タグで実現できます。

<picture>
  <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
          media="(min-width: 1100px)" />
  <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
          media="(min-width: 720px)" />
  <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
          media="(min-width: 450px)" />
  <img src="http://placehold.it/500x600/eee/ddd" 
       alt="image with artdirection" />
</picture>

于 2016-04-27T21:38:23.247 に答える