何年もの間、私たちはbackground-sizeプロパティなしで生活してきましたが、現在では圧倒的多数のブラウザーで実質的にサポートされています。
background-sizeが非常に便利なプロパティであるケースが少なくとも 2 つあります。
しかし、静的な (アニメーション効果をまったく呼び出さずに) コンテンツの背景を完全にサイズ変更する場合はどうでしょうか? プロパティを呼び出さずに、サイズ変更が必要な画像のサイズをいつでも変更できbackground-sizeます。したがって、これは比較的新しいプロパティであり、それを正しく使用する方法がわからないので、私の質問は次のとおりです。画像の前処理の代わりに background-size を使用する必要がある場合と使用しない場合の絶対値について例外的に話しますか?
UPD:これは私の質問を明確にするためのスニペットです。
例外的に絶対値を使用するユースケースはほとんどありません。サーバー側で画像を処理する能力がない場合にのみ、クライアント側のみのソリューションを使用することしか考えられません。
したがって、厳密な質問に対する答えは「何もありません」なので、より広い質問に答えたほうがよいでしょう :)
CSS グラデーションを使用する場合、繰り返しグラデーションをエミュレートするか、それを使用してパターンを作成するか、パフォーマンスを向上させるために使用することができます。最後のケースは最も興味深いものです。要素にグラデーションを設定すると、この要素の高さと幅でレンダリングされ、リソースを消費する場合があります。多くの場合、グラデーションのサイズを 1 つの次元で、場合によっては両方で制限することができるため、ブラウザは 1280x9001 ではなく、たとえば 100x100 でレンダリングします。
background-size: cover画像がブロックを満たしていることを確認するために使用します。たとえば、アプリにユーザー写真やサムネイルを含めることができ、それらのほとんどは 50x50 などの特定のサイズになります。ただし、それよりも小さいものや大きいものもあり、background-sizeここで完璧になります —coverここ を使用して、この画像を領域に合わせることができます (まあ、これは絶対値ではありませんが、非常に便利です。多くの場合、background-position: 50% 0使用写真のポートレート写真の場合、頭をトリミングせずに表示するようにします)。もう 1 つの同様のケース — background-size でページ全体の背景を作成します。
背景サイズは、網膜のようなディスプレイ用の画像を作成するためによく使用されるため、画像は常に縮小されるか (非網膜ディスプレイでもそうです)、条件付きで縮小されます (dpi のメディアクエリを使用)。
いくつかの画像ギャラリーがある場合、クリックすると完全な画像になるサムネイルがいくつかあることがよくあります。サイズ変更されたサムネイルをタグとしてフルサイズの画像の背景として配置すると、プログレッシブ jpeg に似た素晴らしい効果が得られます。これにより<img/>、大きな画像が読み込まれている間、プレースホルダーとしてぼやけた画像が表示されます。ポップアップ付きのライトボックスのようなもので使用するとさらに効果的です。
ああ、あなたはアニメーションは言うまでもないと言いましたが、私はコントロールできないので、このデモへのリンクをここに置いておきます :)