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

Bootstrap4でインラインフレーム(Iframe)をレスポンシブに埋め込む

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

 

任意の画像の場合

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

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

 

スポンサーリンク