CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin

[zuzu_sion]

calc便利だよね

[m-tamakiorg]

“.background { width: 100%; height: 0; padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */ background: url(bg.jpg) center center / cover no-repeat; }”

[mshimfujin]

[レスポンシブ] [縦横比] [背景画像]

[yayocan]

画像　css いっぱい

[jed_lee]

背景画像を常に100%表示。padding-topの箇所をcalcにしておくかsassと絡める。

[minimum_sho]

背景画像の縦横比を固定しながらよ小幅いっぱい

[masakaz77]

[100%]

[akiramaz]

何回も調べては忘れるやつ。