ブラウザのビューポートのサイズに応じて背景画像が伸縮し、拡大縮小されるようにしたいです。
Stack Overflowで、役に立つ質問をいくつか見てきました。CSS 背景の伸縮と拡大縮小たとえば、うまく機能しますがbackground、タグではなく を使用して画像を配置したいと思いますimg。
そのimgタグを配置し、CSS を使用してそのimgタグに敬意を表します。
width:100%; height:100%;
動作しますが、この質問は少し古く、CSS 3では背景画像のサイズ変更がかなりうまくいくと述べています。私はこれを試しました最初の例、しかしそれはうまくいきませんでした。
宣言でそれを実行する良い方法はありますかbackground-image?
ベストアンサー1
CSS3 には と呼ばれる便利な小さな属性がありますbackground-size:cover。
縦横比を維持しながら、背景領域が背景画像で完全に覆われるように画像を拡大縮小します。領域全体が覆われますが、サイズ変更された画像の幅/高さが大きすぎると、画像の一部が表示されない場合があります。