图片在方形容器按比例缩放后，边框显示在容器而非图片上？

DevOps 小满

2026-5-25

解决图片画廊边框显示问题

嘿，我来帮你搞定这个图片边框的问题！核心原因是你给<img>设置了width:100%; height:100%;——这会让图片元素的盒模型完全填满父容器.thumbnail。虽然object-fit:contain让图片内容按比例缩放了，但边框是应用在图片的盒模型上，自然就跟着整个方形容器走了。

解决方案

要让边框只出现在图片本身，我们需要让<img>的盒模型大小匹配它实际显示的图片内容，而不是占满整个容器。可以通过以下两步调整：

修改.thumbnail的布局，用flex让图片在容器内居中对齐
替换图片的宽高设置，让它的盒模型贴合实际图片尺寸

修改后的完整代码

.gallery { overflow: hidden; position: relative; }
.gallery .thumbnail { 
  float: left; 
  width: 18vw; 
  height: 18vw; 
  /* 新增flex布局，确保图片在容器内居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail img { 
  border: 6px solid black; 
  /* 替换为max-width/max-height，让图片按比例缩放且盒模型贴合内容 */
  max-width: 100%; 
  max-height: 100%; 
  /* 保留object-fit确保图片比例正确，避免拉伸 */
  object-fit: contain; 
}