css - background-size: 小さい DIV のカバー

Question

ご存知のようusing background-size: coverに、ブラウザのビューポートで background-image を自動的に完全にスケーリングします。

ただし、サイズが小さい DIV (たとえば 100x100px) に適用すると、画像はコンテナー DIV ではなくブラウザーのビューポート全体に基づいてスケーリングされ、画像の一部のみが表示されます。

background-size: 100% 100%プロポーションを維持することによって実際にスケーリングしないを考慮せずに、これに対する回避策はありますか?

これbackground-size: coverは、JS やサーバー側の変更を使用せずに、その場で簡単にサイズ変更できるので非常に便利です。

前もって感謝します。

Answer 1

ポスターが受け入れることができるようにコメントのコピー：

固定を使用しないでください: )jsfiddle.net/vnMeK

すべてのブラウザがこれをサポートしているわけではないことに注意してください。IEには半ば機能するフィルタがあります。

Answer 2

私はあなたが何を望んでいると確信していますbackground-size: contain。