img标签height属性设为"125px"无效，因HTML规范要求height值不带单位，正确写法是height="125"；更推荐用CSS控制，如height:125px;width:auto保持宽高比。
img 标签 height 属性设 125px 为什么没生效
直接写 height="125px" 在 <img alt="125px图片高度设置方法详解 HTML与CSS代码快速调整步骤" > 标签里，浏览器可能无视——尤其当图片有内联 style、CSS 优先级更高，或响应式框架（如 Bootstrap）重置了默认行为时。HTML 属性 height 的值不带单位（只认数字像素），写成 height="125px" 实际是非法的，会被浏览器静默忽略。
- 正确写法是
height="125"（纯数字，单位隐含为 px） - 但更推荐用 CSS 控制，因为可覆盖外部样式、支持响应式、避免属性冲突
- 若同时写了
width和height属性，浏览器会强制拉伸图片，可能失真
CSS 中设置 img 高度为 125px 的三种常用方式
用 CSS 更可控，也符合现代开发习惯。关键看你要不要保持宽高比、是否允许缩放、是否嵌在弹性容器里。
-
height: 125px;+width: auto;：保持原始宽高比，高度固定，宽度自适应（最常用） -
height: 125px; width: 100%;：高度固定，宽度撑满父容器（适合卡片图、横幅图） -
object-fit: cover;配合height: 125px; width: 100%;：裁剪填充，避免变形（需注意父容器要有明确宽高）
示例：
img.my-img {
height: 125px;
width: auto;
}Flex 或 Grid 容器里 img 高度被“压缩”或“撑开”的原因
当 <img alt="125px图片高度设置方法详解 HTML与CSS代码快速调整步骤" > 放在 display: flex 或 display: grid 的父容器中，默认会按内容尺寸渲染，但主轴对齐、最小尺寸限制（min-height、align-items）可能干扰你的 125px 设置。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器默认有
align-items: stretch，会让子项拉伸填满交叉轴高度——此时单设height不起作用 - 解决方法：给 img 加
align-self: flex-start;或给父容器设align-items: flex-start; - Grid 中若行轨道定义为
grid-template-rows: 1fr;，也会撑高图片；改用minmax(125px, auto)更稳妥
移动端适配时 125px 高度看起来太小或模糊
125px 是 CSS 像素，在高 DPR 设备（如 iPhone）上，若图片资源分辨率不够，浏览器会插值放大，导致发虚；另外，视口缩放或 viewport 设置不当也会让实际显示高度偏离预期。
- 确保图片源文件高度 ≥ 125 × devicePixelRatio（比如 DPR=2，建议提供 250px 高的图）
- 用
srcset提供多倍图：<img src="a.jpg" srcset="a@2x.jpg 2x" style="max-width:90%" alt="125px图片高度设置方法详解 HTML与CSS代码快速调整步骤" > - 检查
<meta name="viewport">是否含user-scalable=no或错误的initial-scale，这会影响 CSS 像素的实际渲染尺寸
真正卡住人的往往不是怎么写 height，而是没意识到 height 受限于父容器约束、图片原始比例、设备像素比三者叠加影响。调一个值前，先用浏览器开发者工具点开 computed 样式，看最终生效的是哪条规则——比猜快得多。
