Bootstrap两列布局图片重叠问题：如何兼顾大图自适应与小图原尺寸显示？

我之前也踩过这个一模一样的坑！Bootstrap的列布局靠内边距来分隔列，一旦图片本身宽度超过列容器，就会直接冲破边界蹭到旁边的列里去。直接给所有img加width:100%确实能堵住溢出，但小图被强行拉满整个列宽度，观感实在太差了。

给你两个最实用的解决方案：

方案1：用Bootstrap原生的img-fluid类 #

这是最省心的方法，Bootstrap专门为响应式图片设计了这个类，核心样式是max-width:100%; height:auto;——大图会自动缩小到列的宽度以内，小图则保持原尺寸，还能保证图片比例不失调。

修改后的代码如下：

<div class="col-lg-9">
  <img src="https://example.com/my-large-img.png" class="img-fluid" />
</div>
<div class="col-lg-3">
  <!-- My second column content -->
</div>

方案2：自定义局部样式（适合精准控制场景） #

如果你不想全局或大范围应用img-fluid，可以只给目标列里的图片写样式：

.col-lg-9 img {
  max-width: 100%;
  height: auto;
}

效果和img-fluid完全一致，但只会作用在col-lg-9容器内的图片，不会影响页面其他地方的图片展示。

额外提醒：如果你的图片高度特别高导致列被拉得过长，可以考虑给图片加max-height属性，配合object-fit: contain保证图片不变形，但大多数场景下，max-width:100% + height:auto就足够解决你的问题啦。

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