Bootstrap 5.3下无弹窗点击图片无法放大宽度问题求助

1. 容器溢出隐藏限制：图片所在的<div>添加了overflow-hidden类，即使把图片宽度设为150%，超出容器的部分会被直接隐藏，导致看不到放大效果。
2. 原始宽度获取错误：resim.style.width只能读取内联样式的宽度值，但你的图片宽度是通过HTML的width="100%"属性设置的，并非内联style，所以originalWidth会是空字符串，点击还原时无法恢复初始宽度。
3. Bootstrap列宽度约束：col-xl类会给容器设置固定的宽度比例，图片放大后会被列的宽度限制，无法突破容器范围。

• 移除图片容器的overflow-hidden类，允许图片超出容器显示
• 改用getComputedStyle获取图片实际生效的初始宽度
• 给图片添加相对定位和层级，确保放大时不会被其他内容遮挡

HTML部分 #

<tr>
  <td colspan="8" class="collapsible-content hidden">
    <div class="container">
      <div class="row">
        <!-- 移除overflow-hidden，添加position-relative确保层级生效 -->
        <div class="col-xl p-0 d-flex justify-content-start position-relative">
          <a id="resizeButton"><img id="resim" src="img/mandalina.jpg" alt="" srcset="" width="100%" style="float: left" /></a>
        </div>
        <div class="col-xl col-auto d-flex text-align-start">
          <p style="text-align: start">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ad, accusantium porro saepe voluptatibus fugiat blanditiis, earum aliquid rem, cum dolores nihil ullam illo placeat itaque quidem fuga esse ipsum recusandae
            adipisci soluta. Vitae ea, quod corrupti, voluptatem illum magnam placeat quisquam necessitatibus fugiat dolore dolor eligendi? Hic iure tenetur in saepe, fugit dolor assumenda. Aspernatur, ratione voluptatibus neque
            explicabo quaerat est eos ullam porro dolorem cum commodi ipsa recusandae consequatur amet blanditiis. Nobis ut iusto ducimus deserunt labore laborum laboriosam aperiam illo itaque nostrum eos praesentium, aut
            reprehenderit accusamus maiores debitis animi facilis ratione ea culpa quibusdam, illum magnam!
          </p>
        </div>
      </div>
    </div>
  </td>
</tr>

JavaScript部分 #

var resim = document.getElementById("resim");
// 通过getComputedStyle获取图片实际渲染的初始宽度
var originalWidth = window.getComputedStyle(resim).width;

document.getElementById("resizeButton").addEventListener("click", function () {
  if (resim.style.width === "150%") {
    resim.style.width = originalWidth;
    resim.style.zIndex = "";
    resim.style.position = "";
  } else {
    resim.style.width = "150%";
    resim.style.zIndex = "999";
    resim.style.position = "relative";
  }
});

• 给图片添加过渡动画，让缩放更平滑：在图片的style里加入transition: width 0.3s ease;
• 如果不想放大时影响其他布局，可以把图片的定位改为absolute，同时确保父容器是position: relative

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