CSS背景边框底部缺失问题求助（附相关代码）

我来帮你搞定这个问题！直接在<img>标签上叠加背景边框和固定尺寸很容易出现布局冲突，咱们换个更可靠的思路——用容器包裹图片，把边框背景放在容器上，布局逻辑会清晰很多：

步骤1：调整HTML结构 #

把<img>放到一个容器div里，让容器负责承载边框样式：

<div class="image-frame">
  <img src="http://placehold.it/1/365f83" alt="示例图片">
</div>

步骤2：修改CSS样式 #

给容器设置边框背景、固定尺寸和内边距，让图片刚好填充容器的内部空间：

.image-frame {
  width: 200px;
  height: 200px;
  background: url("https://image.ibb.co/kXCWvS/frame.png") no-repeat;
  background-size: cover;
  padding: 18px; /* 对应边框的内缩空间 */
  box-sizing: border-box; /* 关键！让padding包含在width/height内，总尺寸保持200x200 */
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片自适应容器，保持比例不拉伸 */
}

为什么原来的代码会出问题？ #

你给<img>设置了height:200px，但默认box-sizing:content-box规则下，padding:18px会额外增加元素的总高度（变成200+18×2=236px），背景图按cover缩放时会适配这个被拉长的总高度，加上<img>作为替换元素的层级特性，就导致边框底部被异常截断了。

用容器包裹后，box-sizing:border-box保证容器总尺寸始终是200x200，padding是内部预留的边框空间，图片刚好填充这个空间，背景边框就能完整显示啦！

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