CODEMemorandum
Hatena pocket LINE
HTML/CSS

Googleマップをレスポンシブ対応で埋め込む

aspect-ratioでアスペクト比を指定する

IEのサポートが終了したので、もう aspect-ratioを使う方法でよいのではないでしょうか。

<div class="map">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8240252754226!2d139.764370915612!3d35.681334787572936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1670477156020!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
.map iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

こんな感じになります。

aspect-ratioを使わない書き方

もしかするとまだ何かあるかもしれないので、念のため、aspect-ratio を使わない書き方もメモ。

.map {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
    /*アスペクト比が16:9の場合は 9/16*100=56.25 で56.25% */
  position: relative;
  width: 100%;
}

.map iframe {
  position: absolute;
    left: 0;
    top: 0;
  height: 100%;
  width: 100%;
}
ホーム » HTML/CSS » Googleマップをレスポンシブ対応で埋め込む