背景画像をレスポンシブに対応させる方法

背景画像をレスポンシブ対応させるにはBootstrap4でインラインフレーム(Iframe)をレスポンシブに埋め込む方法と同じ手法をCSSで使います。

404 NOT FOUND | スタジオ ココペリ

背景画像が4:3のアスペクト比の場合

#bgResponsive{
    height: 0;
    padding-top: 75%;
    background: url('●●●') 0 0 no-repeat;
    background-size: contain;
}

 

任意の画像の場合

padding-topを 高さ÷幅 で求めます。

<例> 幅640px 高さ360px → 56.25%

#bgResponsive{
    height: 0;
    padding-top: 56.25%;
    background: url('●●●') 0 0 no-repeat;
    background-size: contain;
}

 

コメント

タイトルとURLをコピーしました