点击图片应用CSS实现全屏覆盖且不跳转页面顶部

要实现点击图片后全屏覆盖显示，且不会触发页面跳转至顶部的效果，需要结合CSS固定定位与JavaScript事件控制，以下是完整实现方案：

完整代码实现 #

HTML 结构 #

<!-- 示例可全屏展开的图片 -->
<img src="your-image-url.jpg" class="expandable-img" alt="点击可全屏查看">

CSS 样式 #

/* 默认图片样式 */
.expandable-img {
  cursor: zoom-in;
  max-width: 100%;
  height: auto;
}

/* 全屏状态样式 */
.expandable-img.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  z-index: 9999;
  cursor: zoom-out;
  background-color: rgba(0, 0, 0, 0.8);
}

JavaScript 逻辑 #

const expandableImgs = document.querySelectorAll('.expandable-img');

expandableImgs.forEach(img => {
  img.addEventListener('click', (e) => {
    e.preventDefault();
    img.classList.toggle('fullscreen');
    
    // 全屏时锁定页面滚动，退出时恢复
    document.body.style.overflow = img.classList.contains('fullscreen') ? 'hidden' : 'auto';
  });
});

关键细节说明 #

• position: fixed：让图片脱离文档流，基于视口定位，滚动页面时位置固定，不会触发页面跳转顶部。
• 100vw/100vh：确保图片铺满整个视口宽高。
• object-fit: contain：保持图片比例完整显示，避免拉伸变形。
• e.preventDefault()：阻止图片默认点击行为（如链接跳转），彻底避免页面回到顶部。
• 额外添加半透明背景与鼠标样式，提升交互体验。

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