max-height未达预期缩放效果，如何实现图片按高度适配屏幕？

问题核心在于百分比高度的参照逻辑：当你给图片设置max-height:20%时，这个百分比是相对于父元素高度计算的，但默认情况下，html和body的高度并未设置为与视口等高，父元素（比如body）的高度是由内容撑开的，导致20%没有有效的参照基准，所以max-height不生效。而max-width能正常工作，是因为body的宽度默认等于100%视口宽度，百分比有明确的参照对象。

下面是两个可行的解决方案：

方案1：给父元素设置明确高度 #

先让html和body的高度匹配视口高度，给图片的百分比高度提供参照：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
}

之后图片样式保持width:auto; max-height:20%;即可，此时图片会缩放到视口高度的20%，同时自动维持原宽高比。

方案2：使用视口单位vh（更简洁） #

直接用vh单位替代百分比，1vh等于视口高度的1%，无需修改父元素样式：

<img src="https://i.imgur.com/9OPnZNk.png" style="width:auto; max-height:20vh;">
<p>上方图片使用max-height:20vh，已实现基于高度的缩放效果。</p>

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