如何通过JavaScript传递img.id并根据图片横竖屏切换img的ID

核心思路 #

要实现横/竖屏图片的差异化显示，关键是获取原图的真实宽高比，再根据比例切换对应的显示元素。直接修改元素ID容易引发冲突，更稳妥的方式是同时准备两个img容器，通过判断结果控制它们的显示/隐藏状态。

修改后的完整代码 #

HTML

<div class="row">
  <div class="fivecolumn">
    <img src="https://via.placeholder.com/300x200.jpg" alt="横屏示例" style="width: 95%" height="95" onclick="myFunction(this);">
    <img src="https://via.placeholder.com/200x300.jpg" alt="竖屏示例" style="width: 95%" height="95" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg">
  <img id="smallerImg">
  <div id="imgtext"></div>
</div>

CSS

#expandedImg {
  margin-left: 7%;
  width: 85%;
  display: none;
}

#smallerImg {
  margin: 0 auto;
  width: 50%;
  display: none;
}

.container {
  position: relative;
  display: none;
  text-align: center;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
  background-color: rgba(0,0,0,0.5);
  padding: 0 8px;
  border-radius: 50%;
}

JavaScript

function myFunction(imgs) {
  const container = document.querySelector('.container');
  const expandedImg = document.getElementById("expandedImg");
  const smallerImg = document.getElementById("smallerImg");
  const imgText = document.getElementById("imgtext");
  
  // 用临时图片对象获取原图真实尺寸
  const tempImg = new Image();
  tempImg.src = imgs.src;
  
  tempImg.onload = function() {
    const isLandscape = tempImg.naturalWidth > tempImg.naturalHeight;
    
    // 先隐藏所有图片容器
    expandedImg.style.display = 'none';
    smallerImg.style.display = 'none';
    
    if (isLandscape) {
      expandedImg.src = imgs.src;
      expandedImg.style.display = 'block';
    } else {
      smallerImg.src = imgs.src;
      smallerImg.style.display = 'block';
    }
    
    imgText.innerHTML = imgs.alt;
    container.style.display = "block";
  }
}

关键说明 #

1. 真实尺寸判断：通过new Image()加载原图，利用naturalWidth和naturalHeight获取未压缩的真实宽高，避免缩略图尺寸干扰横竖屏判断。
2. 切换逻辑：每次点击先隐藏两个图片容器，再根据宽高比显示对应容器，防止元素重叠显示。
3. 样式优化：给竖屏图设置margin: 0 auto实现居中，同时优化关闭按钮样式提升交互体验。

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