基于HTML、CSS和JS的图片查看器：全屏模式下缺少滚动条

问题：实现的简易图片查看器默认适配屏幕显示，点击后应展示原尺寸大图，但当前大图状态下仅能查看中间区域，无滚动条无法浏览全部内容。

问题根源 #

当前代码里，大图状态的<img>用position: fixed脱离了文档流，导致父容器#image-container的overflow: auto完全失效；同时用transform: scale(2)缩放图片并非真正展示原尺寸，反而让图片居中后无法通过滚动查看完整内容。

修复方案 #

调整CSS样式，让父容器在大图模式下占满视口并支持滚动，同时让图片显示原尺寸：

修改后的CSS代码

#image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: all .5s;
}

#image {
  width: 100%;
  height: auto;
  transition: all .5s;
  cursor: zoom-in;
}

/* 大图模式容器样式 */
#image-container.full-size {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8); /* 加深色遮罩区分模式 */
  z-index: 10;
}

/* 大图模式图片样式 */
#image.full-size {
  cursor: zoom-out;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  margin: 20px auto; /* 上下留边，水平居中 */
}

JS与HTML代码保持不变

const image = document.getElementById("image");
const imageContainer = document.getElementById("image-container");

image.addEventListener("click", function() {
  if (image.classList.contains("full-size")) {
    image.classList.remove("full-size");
    imageContainer.classList.remove("full-size");
  } else {
    image.classList.add("full-size");
    imageContainer.classList.add("full-size");
  }
});

<div id="image-container">
  <img id="image" src="https://bigbookofamigahardware.com/bboah/media/download_photos/cybervisppc_4_big.jpg">
</div>

改动说明 #

• 容器#image-container.full-size设为固定定位占满整个视口，开启overflow: auto，容器内内容超出时自动显示滚动条。
• 图片#image.full-size取消缩放和固定定位，用width: auto+height: auto显示原尺寸，通过margin实现水平居中并预留上下边距。
• 添加深色遮罩背景，强化大图模式的视觉区分度，提升体验。

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