html - 如何在网站中插入一个完全响应的谷歌地图

Question

我将嵌入式 Google map 与响应式图像并排放置在一个 div 中。我希望 map 始终与图像大小相同，并按原样调整大小。 这是我的代码， map 看起来很小。

<div class="grid-container">
<div class="grid12-6 no-gutter">
  <img src="http://1.bp.blogspot.com/-MoFU-ybvlUw/TsXyHlX2AlI/AAAAAAAAARQ/kqXxZ8SquX8/s1600/la+fotolego.JPG" alt="" />
</div>
<div class="grid12-6 no-gutter">
  <div class="map-container">
    <div class="mapa">
      <iframe src="https://maps.google.com/maps?q=manquehue%20norte%201255&t=&z=14&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
    </div>
  </div>
</div>

我希望它看起来像这样

Answer 1

可能，您必须将您的父级保留为显示:flex；子项作为 flex 项或内联项。