コーディング：キービジュアルをメディアクエリでの切り替えなしでレスポンシブ対応できた！

今、デモサイトを作成中。キービジュアルがうまく縮んでくれなくて、メディアクエリで別の画像を作成し直そうかどうしようか悩んでました。んー。。。できれば効率よく作らない方向で行きたいところですよね。

padding-topを計算することでレスポンシブ対応できてしまう！

コーディングでうまく縮んでくれないキービジュアルをpadding-topを計算することで縦横の比を維持したまま綺麗に縮めていける方法をウエブデザイン の師匠の原美穂先生に教わりました。

今日はメモ書き程度のブログですが、メモ書き以上の価値はあります。

ずばり、それがこれ！これスッキリするんです！綺麗に縮んでくれるんです！

背景画像としてキービジュアルを引っ張ってきて画像の幅と高さの比率を計算。そして。。。

コードを以下のように記述：

.box{
width: 100%;
height: 0;

/* (画像の高さ / 画像の横幅) × 100 */
padding-top: (画像の高さ / 画像の横幅) × 100（ %）;

background: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

するぅ〜っと綺麗に画面を縮ませると背景画面も縮んでいった！！

時間とデザインが救われました。

皆さんも是非お試しください。