如何让背景图上的内容缩放时垂直居中并解决相关布局问题

问题1 导航容器缩放偏移问题 #

出现原因

绝对定位元素的margin: 0 auto居中规则默认不生效，你给.nav-link-container设置的left: 10.9%是相对于父容器.nav-section的宽度计算的，而.nav-link-container本身带.page-content类的固定120rem宽度，页面缩放时父容器宽度变化，10.9%的偏移量无法和下方header通过margin:0 auto算出的居中位置对齐，就会出现偏移。

修复方法

修改.nav-link-container的定位规则，删除固定的left: 10.9%，新增left: 0和right: 0，触发绝对定位元素的margin:0 auto居中逻辑，就能和下方header保持同步居中：

.nav-link-container {
  background-color: wheat;
  display: flex;
  justify-content: space-between;
  padding: 1.6rem;
  position: absolute;
  top: 76%;
  /* 新增以下两行，删除原left: 10.9% */
  left: 0;
  right: 0;
}

问题2 图片与header间隙问题 #

出现原因

<img>属于行内替换元素，默认垂直对齐方式为baseline，浏览器会默认在元素底部预留出容纳文本下伸部分的空隙，和全局的内外边距重置规则无关。

修复方法

给图片添加vertical-align: bottom或者将图片设置为块级元素即可消除空隙：

.banner-img {
  width: 100%;
  /* 任选以下一行添加即可 */
  vertical-align: bottom;
  /* display: block; */
}

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