指定したアスペクト比で拡大縮小
margin・paddingの%値は、上下左右いずれも「親要素の横幅」を基準として計算される仕様なので、まず埋め込み用のiframeをdivタグで囲み、そこにpadding-topで希望する比率（16:9の場合は9÷16×100%=56.25%）になるように%値を計算して設定する。これで常に16:9の比率を保ったまま拡大縮小する領域を確保できる。この手法を「padding-topハック」と呼ぶ。
ただし、paddingで領域を確保しただけなのでそのままではこの中にコンテンツを入れることができない。padding-topハックを利用する場合は必ず中に入れたいコンテンツを絶対配置（position:absolute）で上に乗せることがセットになるので注意が必要。
.map {
position: relative;
padding-top: 56.25%; /* 9÷16×100 */
}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}要素にpadding-topを付けたままmax-widthを指定
アスペクト比を16:9で固定してレスポンシブ化したGoogleMapに、max-widthで最大幅（ここでは700px）を指定した場合、700pxでGoogleMapの幅が固定されたあとブラウザ幅を広げると、高さがどんどん大きくなって16:9のアスペクト比が崩れてしまう。これは、padding-topは要素自身の幅ではなく、あくまで「親要素の幅」を基準に算出されるために起こる現象である。
.map {
position: relative;
max-width: 700px;
margin: auto;
padding-top: 56.25%; /* 9÷16×100 */
}疑似要素にpadding-topを付ける
.map自身ではなく、.mapのbefore疑似要素にpadding-topを付ける。このように疑似要素に対してpadding-topを付けておけば、自分自身の幅がどのように変わっても常に自分の幅を基準にアスペクト比を算出できるようになる。
padding-topハックを使ってアスペクト比を確保し、かつ自分自身の幅が100%以外の状態になる可能性がある場合には、疑似要素に対してpadding-topを付けるようにしておくのが良い。
.map {
position: relative;
max-width: 700px;
margin: auto;
}
.map::before {
content: "";
display: block;
padding-top: 56.25%; /* ここにつける */
}aspect-ratio
aspect-ratioプロパティは要素に対して直接アスペクト比を指定できるため、非常に分かりやすく、コードもシンプルになる。
aspect-ratioは2021年9月にIEを除く全てのモダンブラウザに機能が実装されたので、今後はpaddingハックに変わってアスペクト比固定の主要な手段となっていくものと思われる。
.map{
max-width: 700px;
margin: auto;
aspect-ratio: 16/9;
}
.map iframe{
width: 100%;
height: 100%;
}