皆さん、こんにちは。
制作部の関です。
サイトを制作する中、たまにあるのが、
背景画像の比率を保ったまま可変したい！という手法です。
HTMLに画像を設置するのではなく、CSSで背景画像を設置したいときにこれを使えば、
背景画像の比率を保ったまま可変させることが可能です。
padding-top: (画像の高さ / 画像の横幅) × 100 %;
の計算した数字をいれることで
比率を保ったまま背景画像を可変させることができます！
例えば、画像の高さ500px・画像の横幅800pxならば
(500px / 800px) × 100 %
=0.625×100%
=62.5%
padding-top: 62.5%;
となります！
これでレスポンシブ対応背景画像を設置することができます！！
よければ以下の例をご参考ください
<style>
.box{
width: 100%;
height: 0;
/* (画像の高さ / 画像の横幅) × 100 */
padding-top: 62.5%;
background: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
</style>
/* (画像の高さ / 画像の横幅) × 100 */
padding-top: 62.5%;
以上です
良かったらお試しください
制作部 関