Python中使用Folium的IFrame弹窗调整PNG图片尺寸时分辨率降低的问题求助

我完全懂这种郁闷——明明加载的是原图，弹窗里的图片却糊得看不清细节。咱们来一步步排查并解决这个问题：

问题根源 #

你遇到的模糊问题，核心原因是图片被强制拉伸/压缩适配IFrame尺寸，加上浏览器默认的缩放优化损失了细节。你的代码里给<img>设置了width:100%; height:100%;，这会让图片强行填满360x210的IFrame，如果原图比例和这个尺寸不匹配，就会被变形缩放，自然就模糊了。

具体解决方案 #

1. 匹配IFrame与图片的实际尺寸（最有效）

先获取图片的真实像素尺寸，让IFrame的大小和图片比例一致，从根源避免强制缩放。可以用PIL库读取图片尺寸：

import base64
import folium
from PIL import Image

# 获取图片实际宽高
with Image.open('mlosvolcanes.png') as img:
    original_width, original_height = img.size

# 可选：按比例缩小，避免弹窗过大（比如缩放到原尺寸的70%）
scale = 0.7
target_width = int(original_width * scale)
target_height = int(original_height * scale)

# 编码图片
encoded = base64.b64encode(open('mlosvolcanes.png', 'rb').read()).decode()

# 构建HTML：让图片保持原比例，避免拉伸
html = '''
<img style="width:100%; height:100%; object-fit: contain; image-rendering: crisp-edges;" 
     src="data:image/png;base64,{}">
'''.format(encoded)

# 创建匹配尺寸的IFrame和弹窗
iframe = folium.IFrame(html, width=target_width, height=target_height)
popup = folium.Popup(iframe)

# 添加标记到地图
folium.Marker(
    [-39.47108999, -71.85406208], 
    popup=popup, 
    tooltip=tooltip, 
    icon=logoIcon2
).add_to(m)

这里的关键设置：

• object-fit: contain：让图片完整显示在IFrame内，严格保持原比例，不会被拉伸变形
• image-rendering: crisp-edges：告诉浏览器尽可能保留图片细节，避免模糊的缩放优化
• 让IFrame尺寸和图片缩放后的尺寸匹配，彻底消除不必要的缩放操作

2. 快速调整CSS渲染属性（无需改尺寸）

如果不想调整IFrame大小，也可以直接修改<img>的样式，提升渲染清晰度：

<img style="width:100%; height:100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;" 
     src="data:image/png;base64,{}">

添加多组image-rendering属性是为了兼容不同浏览器，确保清晰度优化生效。

3. 确认原图分辨率

最后别忘了检查你的mlosvolcanes.png本身——如果原图分辨率本身就很低，那再怎么调整显示设置也没法变清晰。这种情况下，建议更换更高分辨率的图片版本。

内容的提问来源于stack exchange，提问作者Cristian Alvarez Ocares