使用W3Schools模态图代码时小于max-size的图片被拉伸是什么原因？

导致图片拉伸的代码位置 #

问题出在教程中Modal图片的CSS样式定义部分：

• 教程默认给Modal内的图片设置了固定宽度规则（通常是width: 80%或width: 100%），同时搭配了max-width限制最大尺寸
• 固定宽度规则会强制所有图片（包括原始尺寸小于max-width的小图）都缩放至你设置的宽度值，最终出现拉伸效果

修复方案 #

调整Modal图片的CSS规则，去掉固定宽度配置，仅保留最大宽高限制即可：

.modal-content {
  margin: auto;
  display: block;
  /* 移除原有的width: 80%这类固定宽度配置 */
  width: auto;
  height: auto;
  max-width: 700px; /* 保留你之前设置的最大宽度 */
  max-height: 90vh; /* 可新增最大高度限制，避免长图溢出屏幕 */
  object-fit: contain; /* 可选，确保图片始终按原始比例显示，不会变形 */
}

调整后小于最大尺寸的图片会按原始尺寸渲染，大于最大尺寸的图片会自动等比缩小至符合限制的大小，不会出现拉伸问题。

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