css - div CSS の幅と高さに応じて背景画像をスケーリングします

Question

div の幅と高さに応じて背景画像をスケーリングする方法はありますか? CSSのみ使用。

Answer 1

background-size: coverフルサイズの背景画像に使用します。その結果が気に入らない場合は、div 内に画像を設定して、次のいずれかを指定できます。

コンテナの全幅、縦横比を維持:

width    : 100%;
height   : auto;
position : absolute;
z-index  : 0; /* something lower than content */

縦横比を維持し、コンテナの全高：

width    : auto;
height   : 100%;
position : absolute;
z-index  : 0; /* something lower than content */

コンテナの全幅と高さは、ゆがんで伸びます:

width    : 100%;
height   : 100%;
position : absolute;
z-index  : 0; /* something lower than content */