如何在网站中插入完全响应的Google地图

Question

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

<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;和儿童作为弹性物品或内联。