页面缩放时图片超出父div问题求助，尝试div定位未解决

DevOps 小满

2026-7-13

解决页面缩放时图片超出父级div的问题

问题根源在于图片使用了固定宽高，加上Bootstrap导航链接的默认内边距，当页面缩放、容器宽度收缩时，图片无法自适应空间导致溢出。试试下面的调整方案：

具体解决步骤

移除图片的固定宽高样式，改用响应式属性让它自适应父容器
可选：微调导航链接的内边距，避免容器空间被过度占用

修改后的代码

CSS

.tab-vertical {
  border: 1px solid black;
}

/* 让图片自适应父容器 */
.tab-vertical .nav-link img {
  max-width: 100%;
  height: auto;
  margin: 2px 0 3px 3px;
}

/* 可选：调整导航链接内边距，优化空间占用 */
.tab-vertical .nav-link {
  padding: 0.25rem 0.5rem;
}

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="tab-vertical">
  <ul class="nav nav-tabs" id="myTab3" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="vertical-tab" data-toggle="tab" href="" role="tab" aria-controls="Notes" value="A" onclick="javascript:void(0)" aria-selected="true">
        <img src="https://w7.pngwing.com/pngs/512/200/png-transparent-iphone-4s-desktop-baby-blocks-android-abc-game-photography-toy-block.png" alt="Notes">
      </a>
    </li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>