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

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

404 NOT FOUND | EC Tips
WEB・EC・Bootstrap・Foundation・WordPress を具体化するお手伝い。クライアントより頂いたご質問の回答を備忘録的に記事にしています。

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

 

任意の画像の場合

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

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

 

コメント

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