当然可以搞定这个问题！不过得先理清两种思路：一种是让地图容器本身适配浏览器宽度（这是最靠谱的常规做法），另一种是强制拉伸瓦片（真心不推荐，会让地图变模糊）。下面给你一步步讲清楚：

方法一：调整地图容器尺寸（推荐） #

这是正确的打开方式——不需要动瓦片，只需要修改地图容器的CSS，让它占满浏览器宽度，Leaflet会自动加载对应分辨率的瓦片，保证清晰度和交互正常。

1. 给你的地图容器设置CSS：
   假设你的地图容器ID是map，直接把宽度设为100%，高度可以根据需求设置（比如用vh单位适配视口高度）：

   #map {
     width: 100%;
     height: 90vh; /* 比如占视口90%高度，也可以设固定值如600px */
     margin: 0; /* 去掉默认边距，避免出现留白 */
   }
   

2. 初始化地图时不用额外指定尺寸：
   Leaflet会自动继承容器的大小，正常初始化即可：

   // 初始化地图，设置中心点和缩放级别
   const map = L.map('map').setView([39.9042, 116.4074], 12);
   // 添加瓦片图层（这里用OpenStreetMap示例）
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '© OpenStreetMap contributors'
   }).addTo(map);
   

   这样地图就会自动跟着浏览器宽度变化，瓦片始终保持清晰，交互也不会出问题。

方法二：强制拉伸瓦片（不推荐） #

如果你的场景真的需要拉伸瓦片（比如特殊布局需求，但强烈不建议），可以通过CSS强制缩放瓦片，但会导致地图模糊，而且交互（比如点击、拖拽）会出现坐标偏移：

/* 横向拉伸瓦片，scaleX的值根据你的需求调整 */
.leaflet-tile {
  transform: scaleX(1.5);
  transform-origin: top left; /* 从左上角开始拉伸，避免整体偏移 */
}

再次提醒：这种方法会破坏Leaflet的原生坐标系统，导致交互异常，除非万不得已，别用这个！

常见问题排查 #

如果调整容器后还是没铺满宽度，检查这几点：

• 地图容器的父元素有没有设置固定宽度或者overflow属性，限制了它的扩展；
• 有没有给地图容器加了padding或者border，导致实际宽度小于100%；
• 浏览器有没有默认的body边距，给body加个margin: 0就能解决。

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