ウィンドウ幅に合わせて埋め込んだGoogleMapのサイズを自動で調整するには

Question

いつもお世話になっております。
現在独学でBootstrapを参考してHPを制作しています。

表題の通り、ウィンドウ幅に合わせて埋め込んだGoogleMapのサイズを自動で調整するにはどこに修正したら良いか教授いただきたいです。

よろしくお願い致します。

■PC版

■PC版（ウィンドウ幅が半分した時）

■モバイル版

    <section id="Access" class="Access section-bg">
      <div class="container">
        <div class="section-title" data-aos="fade-up">
          <h2>Access</h2>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="info d-flex flex-column justify-content-center" data-aos="fade-right">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Location</h4>
                <p>〒○○○-○○○○<br>東京都庁</p>
              </div>
              <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Email</h4>
                <p>[e-mail]</p>
              </div>
              <div class="phone">
                <i class="bi bi-phone" href="tel:[phone]"></i>
                <h4>Call</h4>
                <p>00-0000-0000</p>
              </div>
            </div>
          </div>
          <div class="col-lg-8 mt-5 mt-lg-0" >
            <div class="google-map" data-aos="fade-left">
              <div class= ".iframe-wrap">
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12961.947636049876!2d139.68336738709306!3d35.68963388462685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1616837345821!5m2!1sja!2sjp" width="695" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
          </div>
        </div>
      </div>
      </div>
    </section>

/*-----------
# Google map
-----------*/

.Access .google-map .iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%;
}
.Access .google-map .iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
}

.Access .google-map {
  width: 100%;
  background: #fff;

  padding: 20px;
  border-radius: 5px;
}

Answer 1

もしも、まだお悩み中でしたら
この様な形にしてみるのはいかがでしょうか？

<div class="col-lg-8 mt-5 mt-lg-0" >
    <div class="google-map" data-aos="fade-left">
        <div class="iframe-wrap">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12961.947636049876!2d139.68336738709306!3d35.68963388462685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1616837345821!5m2!1sja!2sjp" width="695" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
</div>

そうするとiframeのheightが効かなくなってしまうので、iframe-wrapに対して以下のCSSを追加してあげてください。（私が手元で動かしてみた環境ではheightが効かなくなってしまったので、参考になさってください。）

.Access .google-map .iframe-wrap {
  position: relative;
  width: 100%;
  height:0; /* 追記しました */
  padding-top: 50%; /* 追記しました */
}

heightが効かなくなる理由については、こちらを参考になさってください。
height:100%が効かない！CSSのheightの使い方について

Comments

[kumalike]

本当にありがとうございました！
height　と　padding-top　を追加して調節したら解決できました！
CSSのheightの使い方改めて勉強になりましたm(_ _)m

[AkitoTsukahara]

お役に立てたみたいでよかったです！
引き続き頑張ってください！

Answer 2

.iframe-wrapをHTML内に作成しましょう。

Comments

[kumalike]

kei344様
おっしゃる通り「iframe-wrap」を追加してみましたが、改善しませんでした。（ソースを更新しました。）

[kei344]

.Access .google-map .iframe-wrap は .Access の中にある .google-map の中にある .iframe-wrap という指定です。

[kumalike]

.Access .google-map .iframe-wrap ではなく、.iframe-wrapで修正するべきでしょうか？

[kei344]

？

[kumalike]

初歩的な質問ですみませんが、.iframe-wrapを.Access .google-mapの中に追加したのですが改善できなかったのでどうしたらいいでしょうか？