1

srcset を使用すると奇妙な動作が発生し、理解するのに苦労しています。CodePen を作成しました: http://codepen.io/anon/pen/dYBvNM

問題は、240px、480px、600px、1024px など、さまざまなサイズの (Shopify が生成する) 一連の画像があることです。問題は、それらが最大サイズであることです。つまり、マーチャントがより小さい画像 (たとえば 600 ピクセル) をアップロードすると、1024 ピクセルのバージョンは 1024 ピクセルではなく 600 ピクセルになります。事前にそれを知ることはできないため、すべてのサイズを「最良のケース」として単純に追加する必要があります。

<img
     src="my_1024x1024.jpg"
     srcset="my_240px.jpg 240w, my_480px.jpg 480w, my_600px.jpg 600w, my_1024px 1024w"
     sizes="(max-width: 35em) 100vh, 610px"
     >

画像が実際に予想される最大サイズよりも小さい場合、奇妙なことが起こります。その場合、ブラウザは適切な画像を正しく選択します (この場合、15 インチの Retina では 1024 バージョンが選択されます) が、画像が実際には 1024px (指定したサイズ) よりも小さいため、ブラウザは実際には、ネイティブ解像度よりも小さくなるように画像のサイズを変更しています。

CodePen http://codepen.io/anon/pen/dYBvNMでこれら 2 つの画像が 1024px バージョンであることを比較できますが、srcset を使用したものでは、レンダリングは実際には src のみの場合よりも小さくなっています。画像がネイティブの解像度のままになると予想していました。

その理由を説明していただけますか？

ありがとう！

4

1 に答える 1

2

sizesこれが機能する方法は、指定された値を属性の有効サイズで割ることによって、'w' 記述子が 'x' 記述子に計算されることです。たとえば、1024w が選択され、サイズが 610px の場合、1024/610 = 1.67868852459016x となり、ブラウザが適用する画像のピクセル密度になります。画像の幅が実際には 1024 ピクセルでない場合でも、ブラウザは同じ密度を適用し、画像を「縮小」します。これは、画像の幅と 'w' 記述子が一致する有効なケースでは正しいことだからです。 .

記述子をリソース幅と一致させる必要があります。ユーザーが画像をアップロードするとき、その幅を確認し、それを最大の記述子sizes(1024 より小さい場合) として使用し、指定された画像幅よりも大きい記述子を削除できます。

于 2015-11-26T11:35:11.203 に答える