如何调整谷歌地图对应div尺寸（仅存iframe嵌入代码无原始HTML文件）

你当前留存的iframe已经自带map-content类，无需找回原有div代码即可直接调整尺寸，可按需选择以下任意一种方案实现：

方案1：直接在iframe标签添加内联样式 #

直接修改现有iframe代码，新增style属性指定宽高参数即可，修改后代码示例：

<iframe class="map-content"
    src="https://maps.google.com/maps?q={{json_decode($project->location,true)['lat']}},{{json_decode($project->location,true)['long']}}&output=embed"
    style="width: 100%; height: 400px; border: none;">
</iframe>

其中width和height参数可自定义，固定尺寸可直接写像素值（如width: 600px），自适应父容器宽度写百分比即可。

方案2：通过CSS类规则统一控制尺寸 #

如果不想修改iframe标签本身的代码，直接在页面的<style>标签或引入的CSS文件中添加对应类的样式规则即可：

/* 基础尺寸定义 */
.map-content {
  width: 100%;
  height: 500px;
  border: 0;
  /* 可按需追加其他样式 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 响应式适配移动端尺寸 */
@media (max-width: 768px) {
  .map-content {
    height: 300px;
  }
}

若页面原有旧样式和上述规则冲突，可提升规则优先级，比如将选择器改为iframe.map-content，或在属性值后加!important强制生效。

方案3：手动新增外层div控制布局 #

如果需要外层容器限制地图最大宽度、调整边距等，可自行添加div包裹现有iframe即可，无需找回原有div代码：

<div class="map-wrapper" style="max-width: 1200px; margin: 20px auto;">
  <iframe class="map-content"
      src="https://maps.google.com/maps?q={{json_decode($project->location,true)['lat']}},{{json_decode($project->location,true)['long']}}&output=embed"
      style="width: 100%; height: 400px; border: none;">
  </iframe>
</div>

内容的提问来源于stack exchange，提问作者Agata