header内图片如何定位以显示中间部分且避免父容器裁剪？

你当前的实现里，背景图默认以左上角为锚点铺在容器内（background-position默认值为 0 0），由于header整体高度仅为视口的20%，如果原图高度远大于容器高度，自然只会露出图片最顶部的片段。之前你尝试用top属性偏移图片的操作，本质是移动了整个绝对定位块的位置，一旦偏移量超出父容器边界，就会出现无意义的内容溢出。

零溢出实现「展示图片中间部分」的方案 #

完全不需要靠移动定位块调整图片可视区域，用背景图原生的定位属性就能实现需求，从根源上避免溢出：

• 给.header父容器加overflow: hidden做裁剪兜底，把所有超出header范围的内容直接裁掉，从机制上杜绝漏出问题
• 给背景图补充background-size: cover，让图片按比例缩放匹配容器尺寸，不会出现比例失调的留白或者变形
• 设置background-position: center center，把背景图的可视锚点从左上角移动到图片正中心，不管容器尺寸怎么变化，永远优先展示图片水平、垂直方向的中间片段

修改后的完整CSS代码：

.header {
    position: relative;
    width: 100%;
    height: 20%;
    background-color: grey;
    /* 新增：裁剪所有超出header边界的内容 */
    overflow: hidden;
}

.header-inner {
    position: absolute;
    background-image: url(../images/img.jpg);
    width: 100%;
    height: 100%;
    /* 新增：按比例铺满容器、居中定位背景图 */
    background-size: cover;
    background-position: center center;
}

常见踩坑提示 #

• 手动给.header-inner设top值偏移图片的方式存在固有缺陷：整个div块被下移后，图片的上半部分会从header顶部穿出，哪怕后续加了裁剪，也需要手动计算偏移量适配不同尺寸的图片，维护成本极高
• 如果不需要对图片做比例缩放、希望原尺寸展示，只需要保留background-position: center属性，配合父级的overflow: hidden，超出容器边界的图片部分会被自动裁剪，同样能实现只显示图片中间段的效果
• 不要用负margin、transform位移这类方式调整图片可视位置，这类操作会干扰正常的文档流布局，远不如background-position原生属性的兼容性和稳定性好

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