Bootstrap4模态框画廊：hover缩放图片不被overflow-auto截断的解决方法

问题根源 #

你遇到的图片被截断，是因为带overflow:auto的.tab-pane是所有图片的祖先包含块——浏览器的overflow裁剪规则是作用在包含块层级的，哪怕你给子元素加overflow:visible或z-index都没用，transform放大的元素依然会被这个容器的边界截断。

修复方案 #

方案一：让hover的图片脱离裁剪上下文 #

通过CSS修改，让图片hover时切换为绝对定位，脱离原文档流，突破容器的裁剪限制：

修改后的CSS

.gallery {
  position: relative; /* 设为图片的定位父容器 */
  overflow: visible !important;
  z-index: 999;
}

.gallery-img {
  background-color:#ffeaf2;
  height:10rem;
  margin-left:0.5rem;
  margin-top:0.5rem;
  padding:0.3rem;
  transition: all .5s;
  width:auto;
  position: relative;
  cursor: pointer;
}

.gallery-img:hover {
  box-shadow: 0 0 3px 3px #ffeaf2;
  transform: translate(-50%, -50%) scale(2); /* 先平移再缩放，保证图片中心不变 */
  z-index: 9999; /* 提高层级避免被其他元素遮挡 */
  position: absolute; /* 脱离文档流，不再受overflow裁剪 */
  top: 50%;
  left: 50%;
}

调整后的HTML

需要给每个图片加占位容器，保证滚动区域的高度正常（否则滚动条会失效）：

<div class="tab-pane container fade overflow-auto" id="memart" style="margin-top:-24rem; height:23rem">
  <div class="row ml-2">
    <h1>Gallery</h1>
  </div>
  <div class="row">
    <div class="gallery">
      <!-- 占位容器，维持滚动高度 -->
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329856_TuDnR2FzlveInTq.png" class="gallery-img">
      
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329876_O85sZH316z1NQQz.png" class="gallery-img">
      
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56330075_hjGCrMrZI3dFtcT.png" class="gallery-img">
      
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/62146009_V0BKO0RXTJLZdTT.png" class="gallery-img">
    </div>
  </div>
</div>

方案二：分离滚动区域与图片画廊 #

把滚动功能和图片展示彻底分开，滚动容器只负责占位内容，图片放在容器外，从根源上避免被裁剪：

修改后的HTML

<div class="tab-pane container fade" id="memart" style="margin-top:-24rem; height:23rem; overflow:visible;">
  <div class="row ml-2">
    <h1>Gallery</h1>
  </div>
  <!-- 滚动容器：仅负责占位，保证滚动功能正常 -->
  <div class="row" style="height:calc(100% - 60px); overflow:auto;">
    <div class="gallery-placeholder">
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
      <div style="height:10rem; margin:0.5rem; display:inline-block;"></div>
    </div>
  </div>
  <!-- 图片画廊：绝对定位覆盖在滚动容器上 -->
  <div class="gallery" style="position:absolute; top:60px; left:15px; right:15px;">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329856_TuDnR2FzlveInTq.png" class="gallery-img">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56329876_O85sZH316z1NQQz.png" class="gallery-img">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56330075_hjGCrMrZI3dFtcT.png" class="gallery-img">
    <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/62146009_V0BKO0RXTJLZdTT.png" class="gallery-img">
  </div>
</div>

保留原图片CSS即可

.gallery-img {
  background-color:#ffeaf2;
  height:10rem;
  margin-left:0.5rem;
  margin-top:0.5rem;
  padding:0.3rem;
  transition: transform .5s;
  width:auto;
}

.gallery-img:hover {
  box-shadow: 0 0 3px 3px #ffeaf2;
  transform: scale(2);
  z-index:999;
}

方案选择 #

• 方案一适合不想大幅改动结构的场景，仅通过CSS定位解决；
• 方案二结构更清晰，分离了滚动逻辑和展示逻辑，后续维护更方便。

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