9

私は、タグを使用srcsetしsizesて頭を包み込もうとしているところです。img

主にこの記事のおかげで、基本は理解できたと思いますが、sizes属性の実際の適用には苦労しています。

私が見つけることができるすべての例では、物事は大幅に単純化されており、サイズ属性は、各ブレークポイントで画像の幅がビューポートの幅の正確な比率になるように宣言されており、vm単位を使用できます。例えば：

sizes="(min-width: 36rem) 33.3vw,
       100vw"

もちろん、実生活では、画像自体が他のコンテナー内にあることが多い他のコンテナー内にあり、それぞれに独自のマージン、パディング、または配置があります。

最も単純なケース (画像の幅が流動的で、ビューポートの正確なパーセンテージではない場合) を除いて、calc使用する必要があると言っても過言ではありません。ビューポートの幅から、コンテナを介して画像まで計算されますか? たとえば、メイン ページ コンテナーの 25% であるサイドバーの内側にある 15px の余白を持つコンテナーの 45% のコンテナー内にある 7px のパディングを持つコンテナーにある画像の正しいサイズをどのように計算しますか? 15px のパディングと 1220px の最小幅がありますか?

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
       100vw"

サイズ属性でこれを計算しようとするのはばかげているように思えます。特に、これらすべてが各ブレークポイントで変更される可能性があることを考えると。この非常に複雑な計算を CSS の変更と同期させなければならないことは、狂気のように思えます。そして、パッチのブラウザサポートがありcalcます.

明らかな何かが欠けているように感じますが、それは何ですか?

注: 属性を使用してサイズの計算を行うAlexander Farkas の優れたLazy Sizesdataは知っていますが、標準的な使用方法に興味があります。

4

1 に答える 1

4

まず第一に、 % 単位は では許可されていませんsizes。vw ユニットを使用する必要があります。(スクロールバーの幅を含めることができます)。たとえば、25% は 24-25vw になります。次に、rem と em の間に実際の違いはありません (サイズ属性のコンテキストでは)。CSS で em/rem ベースのメディア クエリ / min-width/max-width を使用しない場合は、サイズ属性でそれらを使用しないでください。

基本的に、サイズは実際の画像サイズと 100% 正確に一致する必要はありません。ブラウザが適切な画像候補をほぼ見つけるように指示します。

min-width: 1200px ルールは、CSS でのすべての max-width の使用法と同様に、sizes 属性の新しいメディア条件の一部であることを明確にする必要があります。

これにより、次のサイズのパーツが残ります。

(min-width: 1200px) calc(11vw - 44px)

max-width を定義したり、サイドバーの拡大を止めるメディア クエリを追加したりする場合は、あまり正確ではなく、11vw - 44px を 10vw に単純に変換できます。

例えば：

sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>"

calc サポートについて: picturefill 3.0 ベータ版は respimage と同様に、IE8+ の calc サポートを含みます。そのため、サイズをサポートするすべてのブラウザーは十分な calc サポートを持ち、すべての respimage polyfilled ブラウザーはサイズの calc もサポートします。

これをまっすぐにすることについて。これは明らかに苦痛であり、ほとんどの場合、CMS/バックエンド システムがここで役立つはずです。ほとんどのプロジェクトでは、許可されている限られた一連の画像形式に同意し、デザインに対応するサイズを記述する必要があります。バックエンドは、これらのサイズを適切な場所にアタッチする必要があります。これが不可能な場合。実際に lazySizes を使用するかsrcset、sizes少なくとも最も重要な画像 (つまり、データを最も保存できる大きな画像フォーマット) には with を使用します。

必要に応じて、実際のウェブサイトを選択できます。完全に正しいサイズが添付されます。しかし、注意してください。幅のみを制限する必要があります。標準は現在、高さ制限のある画像をサポートしていません (これは遅延サイズ機能のみです)。

于 2015-08-04T16:25:15.940 に答える