设置overflow:hidden后容器内图片仍溢出，求技术解决方案

我完全懂你的困扰——明明给容器加了overflow:hidden，图片却还是超出范围，这确实不符合预期，太闹心了。咱们一步步排查解决：

可能的原因&对应解决方案 #

1. 图片的默认样式干扰 #

浏览器会给<img>标签加默认的外边距，而且img默认是行内块元素，底部会留一小段空白间隙，这都可能让图片看起来“溢出”容器。先重置图片的基础样式：

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  padding: 0;
  display: block; /* 消除行内块元素的底部空白 */
}

2. 盒模型导致的容器尺寸偏差 #

你给.brands加了border:1px solid silver，默认盒模型下，border是算在容器尺寸之外的。也就是说，你设置的height:200px是内容高度，加上上下各1px的border后，容器总高度变成202px，图片按100%高度计算就会超出1px。给容器加上box-sizing: border-box就能解决：

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
  box-sizing: border-box; /* 让border包含在200px高度内 */
}

3. object-fit: contain的特性误解 #

object-fit: contain会保持图片原始比例，完整显示在容器内，它本身不会导致溢出。如果你看到的“溢出”是图片没有填满容器的视觉错觉，而你实际想要图片填满容器且不超出，可以把object-fit改成cover：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填满容器，超出部分被裁剪，比例不变 */
  margin: 0;
  padding: 0;
  display: block;
}

4. 第三方样式的覆盖干扰 #

你用了col-xl-3这类Bootstrap列类，这类类默认会有padding，可能导致.brands的可用宽度被压缩，间接让图片出现溢出。给.brands加上width:100%强制填满父容器：

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%; /* 确保容器填满列的可用空间 */
}

整合后的完整测试代码 #

把上述调整整合后，你的CSS可以改成这样：

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按需求换成contain也可以 */
  margin: 0;
  padding: 0;
  display: block;
}

如果还是有问题，建议用浏览器开发者工具（F12）查看容器和图片的实际尺寸，看看有没有其他第三方样式覆盖了你的设置，这是排查这类样式问题的常用方法。

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