地图容器大屏拉伸变形的根本原因是宽高未等比缩放，应使用padding-top配合绝对定位实现兼容性最强的等比缩放，并确保父容器relative定位、iframe无height属性。
地图容器为什么在大屏上拉伸变形
根本原因是直接写 width="100%" height="450" 或用 height: 100%，让 iframe 自己“猜”高度——而大屏下父容器宽度暴涨，高度却没同步放大，宽高比就崩了。地图控件错位、缩放按钮挤出边界、甚至只显示左上角一块，都是这个症状。
用 padding-top 实现等比缩放（兼容性最强）
这是目前最稳的纯 CSS 方案，不依赖 JS、不触发重排、所有浏览器都认。核心是用 padding-top 的百分比值（基于父容器宽度）来“撑高”容器，再用绝对定位让 iframe 填满。
-
padding-top: 56.25%对应 16:9（如 1920×1080 大屏常用） -
padding-top: 75%对应 4:3（适合部分监控看板或旧系统界面） - 必须给外层
<div> 加 <code>position: relative，否则position: absolute的 iframe 会脱标定位 - 务必删掉 iframe 上的
height属性，它会覆盖 CSS 计算的高度 - 加一条媒体查询：
@media (min-width: 1920px) { .map-container { max-height: 600px; } } -
<meta name="viewport" content="width=device-width, initial-scale=1.0">在大屏页面里其实可以省略，但若同一套代码要兼顾移动端，保留它并用maximum-scale=1.0防止双击放大干扰布局 - 避免对 iframe 容器用
flex: 1或grid-area直接撑高，某些浏览器渲染顺序会导致初始高度为 0，地图白屏 - 推荐写法：
style="height: 60vh; width: 100%; position: relative;"—— 用vh而非固定像素，适配不同大屏高度 - 初始化后立刻调一次
map.invalidateSize()，尤其当容器被隐藏后又 show 出来（比如 tab 切换） - 如果地图嵌在
display: grid区域里，确认该 grid item 设了min-height: 0，否则 Chrome 会阻止子元素撑开高度
大屏专用：配合 viewport 和媒体查询微调
单纯等比缩放在超宽屏（如 3840px）下可能让地图区域过高，挤压其他内容。这时不能靠 JS resize 监听——大屏往往固定分辨率，没必要频繁重绘。
Leaflet 地图在大屏中的特殊处理
Leaflet 不是 iframe，它的容器 <div id="map"> 必须有明确 <code>height，且大屏下容易因父级 flex/grid 收缩导致尺寸归零。
position: relative，或者 Leaflet 容器漏写了 height——这两处一错，大屏上地图要么消失要么撕裂，调试时得先盯死这两个点。
