Flask中嵌入图片出现挤压变形问题求助

问题分析 #

你遇到的问题和url_for本身无关——它只是正确生成了图片路径，和直接写的<img src="../static/assets/t1.jpg">指向同一张图片。变形的核心原因是浏览器对仅设置百分比height的img元素的宽高比计算逻辑，或是页面全局CSS规则干扰了渲染。

解决方案 #

尝试以下几种方法修复：

• 强制维持宽高比：在img标签中添加width="auto"，让浏览器自动根据高度计算合适宽度，避免挤压：

<img src="{{ url_for('static', filename='assets/t1.jpg') }}" height="30%" width="auto">

• 使用CSS的object-fit属性：如果需要严格控制图片显示区域同时保持比例，添加object-fit样式：

<img src="{{ url_for('static', filename='assets/t1.jpg') }}" height="30%" style="object-fit: contain; width: auto;">

• 改用视口单位替代百分比：如果父元素没有明确设置高度，百分比height的计算基准会不确定，改用vh（视口高度单位）更稳定：

<img src="{{ url_for('static', filename='assets/t1.jpg') }}" height="30vh" width="auto">

• 检查全局CSS规则：打开浏览器开发者工具（F12）查看该img元素的计算样式，确认是否有全局CSS（比如img { width: 100%; }）强制设置了固定宽度，导致和高度属性冲突。如果有，针对性调整该元素的样式即可。

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