CSS 元素不响应

Question

因此，在我的代码中，容器的其他元素正在响应，并且在设备缩小时完全按照我希望的方式工作，但是

maps

元素没有正确响应。现在

maps

元素变得过于缩小，并且与其他元素的数量不同。最近三天一直坚持这个。有什么办法可以让它正常工作吗？

我的html文件：

<div class="section">
    <div class="container">
    <div class="row justify-content-between">
    <div>
        <iframe src="{{ object.location }}" 
        class="col-lg-12" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    </div>
    </div>
</div>

Answer 1

1. 您可以在 iframe 中添加

   width="100%"

   ：

或

2. 我在这里做了一个例子，如果你喜欢它，那就使用它：

   .map-container {
             position: relative;
             overflow: hidden;
             width: 100%;
             padding-top: 75%; /* Adjust this value as needed to maintain the aspect ratio */
         }
     
         .map-container iframe {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             border: 0;
         }

   <div class="section">
       <div class="container">
       <div class="row justify-content-between">
       <div>
         <div class="map-container">
           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235013.74843228213!2d72.414930809941!3d23.020474099659204!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C%20Gujarat!5e0!3m2!1sen!2sin!4v1703309487976!5m2!1sen!2sin" 
           class="col-lg-12 img-fluid" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         </div>
       </div>
       </div>
       </div>
   </div>