如何设置模态框图片的max-width/height且不拉伸尺寸更小的原图？

问题根因 #

你参考的模态框示例默认给弹窗内图片设置了width: 100%属性，该属性会强制图片宽度占满容器宽度，所以尺寸小于容器的小图会被拉伸，和你配置的max-width/max-height规则无关。

修复方案 #

修改CSS配置 #

替换弹窗图片的原有宽高配置即可：

/* 此处的.modal-content对应示例中模态框图片的类名，如果你修改过类名请同步替换 */
.modal-content {
  /* 保留原有margin、display等非宽高属性 */
  max-width: 90%; /* 替换为你需要的最大宽度限制 */
  max-height: 90vh; /* 替换为你需要的最大高度限制 */
  width: auto;
  height: auto;
  /* 可选补充：确保极小屏幕下图片也不会拉伸变形、始终完整显示 */
  object-fit: contain;
}

验证说明 #

示例提供的默认JS逻辑仅修改图片src属性，不会动态调整图片尺寸，修改上述CSS后即可直接生效：大于尺寸限制的图片会自动缩放至符合max规则，小于限制的图片会保持原始大小显示。

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