[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能

質問

ブラウザのビューポートサイズに応じて、背景画像を伸縮させたいのですが。

Stack Overflowで、この仕事をするいくつかの質問を見ました。 CSS背景のストレッチとスケール を例にとって説明します。うまくいくのですが、画像を配置するのに background でなく img タグを使用します。

その中に img タグが配置され、CSSでそれを img タグを使用します。

width:100%; height:100%;

それは動作しますが、その質問は少し古いもので、CSS 3で背景画像のサイズを変更するとかなりうまくいくと述べています。私はこれを試してみました 例 1つ目 が、私にはうまくいきませんでした。

で行う良い方法はないでしょうか？ background-image を宣言してください。

どのように解決するのですか？

CSS3には background-size:cover .

アスペクト比を維持したまま、背景領域を完全に覆うように画像を拡大縮小します。領域全体がカバーされます。ただし、リサイズ後の画像の幅／高さが大きすぎる場合、画像の一部が見えないことがあります。