今回は、「height100vhの背景画像を縦横比を維持してレスポンシブする方法」について解説します！
今回解説する方法を使うと、自動的に背景画像の縦横比を維持してくれるので、レスポンシブが楽になります。
コピペできるようになっているので、是非参考にしてください！
height100vhの背景画像を縦横比を維持してレスポンシブする方法
完成形はこちら。
それではHTMLとCSSコードを詳しく見ていきましょう！
HTML
HTMLコードはこちら。
<div class="first-v"></div>
firstのクラスを持ったdivタグを用意しました。
CSS
CSSコードはこちら
.first-v {
background-image: url(../image/img1.JPG);
background-size: cover;
height: 0%;
padding-top: min(100vh, 75%);
}
「background-image」で背景画像を指定します。
画像パスはご自由に変えてみてください！
「background-size: cover;」で画像を見やすいように表示します。
そして、ここからがポイントです！
まずは「height: 0%;」で、画像の高さを無くします。
そして「padding-top」で画像の高さをブラウザ幅に対して相対的な高さになるように数値を設定します。
今回はminを使って実装しました。
PCの時は高さ100vhが適応され、それ以外の時は75％の割合で相対的に背景画像の高さを保つようにしました。
75％の数値の部分は
高さの比率 ÷ 横幅の比率 × 100%
の式で計算することが出来ます。
以下のアスペクト比が使われることが多いですね。
56.25% = 16:9
75% = 4:3
100% = 1:1
数値はお好きなサイズになるように変えてみてください。
※ Sassの場合は「padding-top: unquote(“min(100vh,75%)”);」と書きます。
まとめ
以上が、「height100vhの背景画像を縦横比を維持してレスポンシブする方法」の解説でした。
