Lightbox图片适配问题：max-width触发时避免图片变形

嘿，这个场景太常见了！你遇到的问题核心是固定高度打破了图片的原生宽高比——当窗口变窄，max-width生效限制了宽度，但height:85vh还是强制图片保持这个高度，自然就变形了。

这里有两种完美解决的方案，你可以根据需求选择：

方案1：让图片自动适配宽高（无留白） #

这种方法会让图片优先尝试达到85vh的高度，当宽度超过90%视口宽度时，自动缩小高度来匹配宽度，完全保持比例且没有留白：

.modal-image {
  max-height: 85vh; /* 优先尝试达到的高度上限 */
  max-width: 90%;   /* 宽度上限 */
  width: auto;      /* 宽度随图片比例自动调整 */
  height: auto;     /* 高度随图片比例自动调整 */
}

原理很简单：把固定的height换成max-height，让图片的尺寸由自身比例和两个限制条件共同决定——哪个限制更严格，就以哪个为准，完美保留图片的原始比例。

方案2：固定高度，用object-fit保持比例（允许留白） #

如果你希望灯箱的高度始终保持85vh，图片在这个高度范围内居中显示、不变形（可能上下或左右出现留白），可以用object-fit属性：

.modal-image {
  height: 85vh;
  max-width: 90%;
  object-fit: contain; /* 让图片完整显示在容器内，严格保持比例 */
  object-position: center; /* 图片居中显示，可选配置 */
}

这个方案适合需要固定灯箱容器高度的场景，图片会在85vh的高度框内自动缩放，不会超出max-width的限制，同时完全不会变形。

两种方案都能解决你的问题，看你更倾向哪种视觉效果啦！

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