图片无法按容器高度自动缩小，溢出.modal-wrapper .modal div如何解决

问题本质 #

现有CSS配置仅适配了宽度溢出的自适应场景，未限制图片的最大高度，因此当图片高度大于容器高度时就会出现溢出。

基础适配代码 #

给.modal-wrapper .modal下的img元素添加如下样式即可实现宽高都自适应容器，且保持原图比例不变形：

.modal-wrapper .modal img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* 可选配置：让图片在容器内水平居中 */
  display: block;
  margin: 0 auto;
}

进阶适配方案 #

如果需要更精准的展示控制，可使用object-fit属性实现不同的填充效果：

.modal-wrapper .modal img {
  width: 100%;
  height: 100%;
  /* 完全展示完整图片，比例不匹配时容器会留空白 */
  object-fit: contain;
  /* 填充满整个容器，比例不匹配时超出部分会被裁切，无空白 */
  /* object-fit: cover; */
}

注意事项 #

• 需确保父容器.modal-wrapper .modal已经设置了明确的可计算高度值，否则max-height: 100%无参照基准无法生效
• 如果modal内还包含标题、操作按钮等其他元素，建议给图片单独包裹一层父容器，给modal设置display: flex; flex-direction: column;，再给图片父容器设置flex: 1;来自动分配剩余高度，最后给图片应用上述样式即可

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