网页进入全屏模式时图片被过度放大是什么原因，如何解决？

你这个问题的核心是全屏切换后视口尺寸变大，图片没有设置最大尺寸限制，导致跟随视口无限制拉伸放大，按照下面的步骤修改CSS即可修复：

• 首先给全局图片添加基础自适应规则，避免任意场景下拉伸变形：

img {
  /* 保证图片宽度不超过父容器宽度 */
  max-width: 100%;
  /* 高度自动跟随宽度调整，保持原始比例 */
  height: auto;
  /* 可根据你的设计需求设置最大允许放大的尺寸，避免放得过大 */
  max-width: 1200px;
  max-height: 80vh;
  /* 强制保持图片比例，多余区域留白，不会被拉伸裁切 */
  object-fit: contain;
}

• 如果是通过JS的Fullscreen API触发的全屏，需要额外给全屏状态下的容器内图片单独加规则，假设你的全屏挂载容器id为fullscreen-wrapper，添加如下兼容多浏览器的样式：

/* 标准语法 */
#fullscreen-wrapper:fullscreen img {
  max-height: 90vh;
  object-fit: contain;
}
/* webkit内核浏览器兼容 */
#fullscreen-wrapper:-webkit-full-screen img {
  max-height: 90vh;
  object-fit: contain;
}
/* 火狐浏览器兼容 */
#fullscreen-wrapper:-moz-full-screen img {
  max-height: 90vh;
  object-fit: contain;
}

• 如果涉及背景图放大问题，调整背景图相关属性即可：

.your-bg-element {
  /* 不要用cover强制铺满，改用contain保证完整显示背景图 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

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