百分比高度（如 max-height: 15%）对图片无效，因其依赖父容器明确高度，而默认块级容器高度为 auto，导致解析为 0px；应改用 vw/vh/vmin 视口单位并配 viewport meta 标签。
为什么 max-height: 15% 对图片无效
百分比高度（如 max-height: 15%）在 CSS 中必须基于有明确高度的父容器才能计算。而默认情况下，、<div> 等块级容器高度为 <code>auto，导致子元素的百分比高度最终解析为 0px——图片看起来没变化，其实是被压扁到不可见了。
这不是浏览器 bug，是 CSS 规范行为。别在没设父容器 height 的前提下用百分比高度控制图片尺寸。
vw 和 vh 是更直接的视口绑定方案
视口单位绕过父容器依赖，直接按浏览器窗口宽高计算：1vw = 1% of viewport width，1vh = 1% of viewport height。对响应式图片缩放来说，这是最可控的起点。
-
width: 80vw：宽度始终为视口宽度的 80%，窄屏自动缩小，宽屏充分展开 -
max-height: 60vh：防止竖屏时图片过高撑开布局 -
height: auto必须配合使用，否则会破坏原始宽高比 - 加
display: block可消除<img alt="HTML图片自适应视口单位设置方法" >默认的行内基线留白
示例：
立即学习“前端免费学习笔记（深入）”；
img.responsive {
width: 80vw;
height: auto;
max-height: 60vh;
display: block;
}
用 vmin 实现“不溢出+等比缩放”双保险
当图片需要在任意设备上都完整可见（比如 banner 图、登录页大图），vmin 比 vw 或 vh 更稳妥：它取视口宽、高中较小值的百分比，确保无论横屏还是竖屏，图片都不会超出可视区域。
常见误用是只写 width: 100vmin 却漏掉 height: auto，结果图片被拉伸变形。
-
width: 90vmin+height: auto→ 宽屏受宽度限制，窄屏受高度限制 - 搭配
object-fit: contain可进一步避免裁剪（适合图标、logo 类小图） - 若需填满且允许裁剪，改用
object-fit: cover，但注意焦点区域可能被切掉
移动端必须配 <meta name="viewport">
没有这行，vw/vmin 在 iOS Safari 和安卓 Chrome 中会按“虚拟桌面视口”（通常 980px）计算，导致图片远小于预期——你调了半天 30vw，实际显示却像 30px 那么小。
必须确保 HTML 最开头有：
<meta name="viewport" content="width=device-width, initial-scale=1">
它不是可选配置，是视口单位生效的前提。漏掉这行，所有基于 vw 的调整都白搭。
复杂点在于：如果页面嵌在 WebView 或某些 PWA 容器里，还需确认宿主是否覆盖了 viewport 行为；容易被忽略的是，SSR 渲染时若 meta 标签被注释或动态插入，也可能失效。
