CSS设置容器border边框无法完全覆盖背景图片问题求助

问题复现代码 #

HTML结构 #

<div class="bg-container">
  <img src="images/HD-High-Tech-Background.jpg" alt="High Tech-Background" style="width:100%;">
  <div class="bottom-left"></div>
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="bottom-right"></div>
</div>
<div class="centered">Computer Technology</div>

原有CSS样式 #

.bg-container {
  border: 5px solid #D1270B; 
  height:100%; 
  box-sizing:border-box; 
  width:100%;
}

.centered {
  padding-top:2em;
}

问题效果参考：边框包裹异常截图

故障原因 #

<img>默认为行内替换元素，默认与父元素文本基线对齐，底部会预留3-4px的空白用于承载字母下沉部分（如p、g等字符的下半段），最终导致容器高度大于图片实际高度，视觉上出现边框没有完全包裹图片的缝隙。

修复方法 #

任选一种方案即可生效：

• 方案1（推荐）：将图片转为块级元素，从根源消除行内元素的基线间隙

/* 追加样式 */
.bg-container img {
  display: block;
}

• 方案2：修改图片垂直对齐属性，避开基线对齐规则

/* 追加样式 */
.bg-container img {
  vertical-align: bottom; /* 赋值为top/middle也可实现相同效果 */
}

• 方案3：给父容器设置字号为0，消除基线空白的占位（如果容器内有文字，需要单独给文字元素重设字号）

/* 修改原有.bg-container样式 */
.bg-container {
  border: 5px solid #D1270B; 
  height:100%; 
  box-sizing:border-box; 
  width:100%;
  font-size: 0; /* 新增属性 */
}
/* 容器内有文字时追加，还原正常字号 */
.bg-container .text-element {
  font-size: 16px;
}

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