如何实现图片全屏显示而非使用iframe？求技术解决方案

直接用下面这套完整的HTML+CSS+JavaScript代码就能实现全屏图片预览效果，完全不需要依赖iframe：

<!DOCTYPE html>
<html>
<head>
<style>
/* 缩略图样式 */
.img-thumbnail {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
  cursor: pointer;
  transition: 0.3s;
}

.img-thumbnail:hover {
  opacity: 0.7;
}

/* 模态框背景：全屏覆盖 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位，覆盖整个视口 */
  z-index: 1000; /* 确保在最上层 */
  padding-top: 50px; /* 图片顶部留白，可按需调整 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 图片超出视口时允许滚动 */
  background-color: rgba(0,0,0,0.9); /* 半透明黑色背景 */
}

/* 模态框图片：自适应全屏 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<!-- 缩略图 -->
<img src="your-image.jpg" alt="预览图片" class="img-thumbnail" id="myImg">

<!-- 模态框容器 -->
<div id="myModal" class="modal">
  <span class="close-btn">&times;</span>
  <img class="modal-content" id="imgModal">
</div>

<script>
// 获取页面元素
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("imgModal");
var closeBtn = document.getElementsByClassName("close-btn")[0];

// 点击缩略图打开模态框
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
}

// 点击关闭按钮关闭模态框
closeBtn.onclick = function(){
  modal.style.display = "none";
}

// 点击模态框背景关闭模态框
window.onclick = function(event){
  if(event.target == modal){
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

关键使用说明： #

• 把代码里的your-image.jpg替换成你自己的图片路径即可
• 模态框通过position: fixed+width: 100%+height: 100%实现全屏覆盖
• 图片用max-width: 90%和max-height: 90%保证在全屏内自适应显示，既填满视口又不会变形
• 点击缩略图、关闭按钮、模态框背景都能触发打开/关闭操作，和你参考的效果完全一致，但完全脱离了iframe

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