CSS min()与max-height有何差异？为何流体图小视口表现不同？

很多人会把动态计算的固定高度值和高度上限的约束逻辑搞混，这两段代码虽然看起来都把最高高度限制在了850px，但实际对元素高度的控制逻辑是完全独立的两套体系。 #

第一套height: min(100vh, 850px)的实际运行逻辑 #

这里给图片设置的是动态计算的固定高度值，不是高度上限。
这个写法的意思是：图片的最终高度，直接取当前视口高度和850px两个值里更小的那个——不管图片自身的原始宽高比是多少、不管父容器宽度是多少，只要CSS加载完成，图片的高度就被这个值完全锁死，没有自由计算的空间。
配合width:100%和object-fit: cover的效果就是：

• 大视口下，视口高度超过850px时，图片固定高850px，宽度撑满父容器，用cover裁剪适配
• 小视口下，视口高度不足850px时，图片的高度会跟着视口高度同步缩小，哪怕这时候按图片原始比例算出来的自然高度远小于视口高度，也会被强制撑到当前视口的高度，多余的画面用cover裁剪掉。

第二套max-height: 850px的实际运行逻辑 #

这里设置的是真正的高度上限，不对元素的基础高度计算做强制约束。
当你只给图片设了width:100%、没有写明确的height值时，图片的默认高度计算逻辑是：按照自身原始宽高比，跟随宽度的变化等比缩放。
max-height:850px的作用，只是在这个等比缩放算出来的高度值上，加一个拦截规则：如果算出来的高度超过850px，就强制压到850px；如果算出来的高度比850px小，这个规则根本不会触发。 #

小视口下表现差异的具体来源 #

举个最常见的实测场景：拿一张原始比例16:9的流体图，把视口缩到375px宽、667px高的手机尺寸：

• 第一套min()写法的图片：高度被强制设为min(667px, 850px) = 667px，也就是直接撑满整个视口高度，因为宽度只有375px，高度却被锁了667px，object-fit:cover会把图片裁成竖长的满屏块
• 第二套max-height写法的图片：宽度375px时，按16:9比例算出来的自然高度只有210px，这个值远低于850px的上限，max-height规则完全不生效，图片就是正常等比缩放的横向窄条，根本不会主动撑到视口高度。

最容易踩的认知误区就是：别把带min()的动态固定高度，当成普通的高度上限——前者是“强制把高度设成某个值”，后者是“给自由计算的高度加个不能超过的天花板”，逻辑上完全不在一个层面。 #

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