iframeで埋め込んだGooglemapがsafariで半分しか表示されません。

Question

実現したいこと

iframeで埋め込んだGooglemapをiPhone(Safari)で画面幅いっぱいに表示したいです

発生している問題

Wordpressを用いてあるページにGooglemapをiframeで埋め込みました。スマホで画面幅いっぱいに埋め込んだマップを表示させようとしたのですが、実機（iPhone 12mini）で確認したところ下記画像のように左半分しか表示されません。右半分をタップしてみると反応しているので表示自体は画面幅いっぱいなのかもしれませんが見えません。

該当のソースコード

<div class="inner">
  <div class="map">
    <iframe src="googlemapの埋め込み用url"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

.inner {
width: min(80%, 1200px);
}

.map {
width: 100vw;
height: 100vw; //画面幅いっぱいかつ正方形で表示するため
margin: 0 calc(50% - 50vw) 20px; //画面幅いっぱに表示するため
}

試したこと

CSSが問題なのかと思い、全て切って表示してみましたが変わらずでした。違うページで同じように画面幅いっぱいに表示した時には何も問題はなかったので原因がわかりません。
きちんと表示されているページと読み込んでいるjsファイルやプラグインなどに違いはありません。
wordpressを使用していますが、コード自体は直接phpファイルに記述しています。
どのようなことが原因として考えられるか教えていただければと思います。

また、初めて質問するので足りない情報などありましたら都度追加していきたいと思います。
どうぞよろしくお願いいたします。

Answer 1

このサイトを参考に解決できました。
iframeに「object-fit:cover;」を指定したのが原因のようでした。
別にしていた共通で読み込んでいたCSSに記述していたので、気づきませんでした。
逆に他のページではこれを指定した状態でも画面幅いっぱいに表示されていたのは何故なのか…とも思いますが、ひとまず解決できました。

Comments

[2ckD]

そこだけだと親要素に影響されて幅いっぱいに表示できないこともあると思うので、一応コメントしておきます。
解決方法1
レスポンシブにしたいなら
「@media (min-width:768px){ ... }」のように細かく.innnerの設定を書いていく必要があります。

解決方法2
それか、

<div class="innner">
<p></p>
<iframe ...(略)>
<p></p>
</div>
となっているのを
<div class="innner">
<p></p>
</div>
<iframe ...(略)>
<div class="innner">
<p></p>
</div>

のように分割していくのが現実的です。

解決方法3
「width:100vw」にして「position:absolute」か「position:relative」で座標をずらす方法も無くはないですが、
あとに続く要素もずらさないといけないので現実的ではないです。

[riiiiiiii]

追加の解決方法まで教えていただきありがとうございます！色々試してみたいと思います。

Answer 2

画面いっぱいにiframeを表示するなら
親要素の.innerを下記のようにします。

.inner{ width:100%;}

.mapについては横幅100%且つ正方形ということなので

.map{
	width:100%;
	aspect-ratio:1/1
}

とすればいいでしょう。

画像のように表示が左半分だけになったのは、
calc(50% - 50vw)によって左右にマイナスのmarginが設定されたためです。

Comments

[riiiiiiii]

ありがとうございます。私の説明不足だったのですが、実際は.innerの中に他の要素もありスマホでのレイアウトやパソコンでのレイアウトを考慮した際に、親要素の.innerはこのままでこの親要素をはみ出す形で、.mapを画面幅いっぱいに表示させたかったのです。
また、私もcssがおかしいのかと思い、ご指摘いただいた「calc(50% - 50vw)」の部分を消したりしてみたのですが半分しか表示されず原因がわからない状態です。