如何使用 Bootstrap 使谷歌 map iFrame 響應？

Question

我已經這樣做了，代碼如下，我多次復制相同的 iFrame 不同的縱橫比，顯示或隱藏特定尺寸。 有沒有更好/更短的方法來做到這一點？

 <div class="container map d-none d-xl-block"><iframe src="https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d2919;353178018696:2d47,4802444157619,3d42;97083340430253:2m3.1f0.2f0?3f0.3m2.1i1024.2i768.4f13;1:3m3,1m2,1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4;2sUlitsa%20Engel&#39:sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015.5e0.3m2?1sen.2sru.4v1621256990741.5m2.1sen;2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div> <div class="container map d-none d-lg-block d-xl-none"><iframe src="https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d2919;353178018696:2d47,4802444157619,3d42;97083340430253:2m3.1f0.2f0?3f0.3m2.1i1024.2i768.4f13;1:3m3,1m2,1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4;2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="900" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div> <div class="container map d-none d-md-block d-lg-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="700" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div> <div class="container map d-none d-sm-block d-md-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="530" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div> <div class="container map d-xs-block d-sm-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="300" height="300" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>

Answer 1

 .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

 <div class="container map d-none d-xl-block"> <iframe class="responsive-iframe" src="https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d2919;353178018696:2d47,4802444157619,3d42;97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"> </iframe> </div>

現在 Iframe 響應

Answer 2

如果您仔細看到 iframe 中有width="1100" 。 只需將其替換為width="100%"