【safariとchromeで違う?】paddingとaspect-ratioの併用
Share
こんなことを説明しています!
- chromeとsafariで崩れる原因
- 理論的な解説
- 解決策
解説動画
コードの解説
HTMLの記述
<div class="inner"> <h2 class="title">safariとchromeで違う?<br>paddingとaspect-ratioの併用</h2> <div class="box-wrap"> <div class="box"></div> </div> <div class="box-wrap2"> <div class="box"></div> </div> </div>
CSSの記述
// ==================== // 今回のテーマ // ===================== .box-wrap { border: 1px solid blue; background: #9ef3f7a1; margin: auto; margin-bottom: 40px; width: 300px; height: auto; aspect-ratio: 300 / 450; padding: 50px 10px; } .box { width: 100%; height: 100%; background: #f84242; } .box-wrap2 { border: 1px solid blue; background: #9ef3f7a1; margin: auto; margin-bottom: 40px; width: 300px; height: 450px; padding: 50px 10px; }
ポイント/手順
- chrome: 余白を入れた分で比率を取る
▶️青い部分の比が 300 : 450 - safari: 余白を入れずに比率を取る
▶︎赤い部分の比が 300 : 450
下記画像のようになります!
解決策
height: auto; にぜずに高さを指定する!