求助：如何让Header图片占满整个Header区域？

你的代码存在几个关键问题：

• object-fit 属性仅对img、video这类替换元素生效，你当前加到父div上不会起作用
• 未给img元素设置适配容器的宽高规则
• HTML结构存在冗余嵌套，可简化

修改后的完整代码： #

HTML（简化结构）

<header class="header">
    <img src="banner.jpg" alt="Property Homepage Logo" class="header-image">
</header>

CSS

#wrapper {
    margin: 0 auto;
    width: 80%;
}
.header {
    width: 100%; /* 确保header占满父容器可用宽度 */
    background-color: #4f6367;
    margin: 0 auto;
    padding: 0;
    overflow: hidden; /* 防止图片超出容器范围 */
    /* 若需要固定header高度，可添加：height: 300px; */
}
.header-image {
    width: 100%; /* 图片宽度占满header */
    height: 100%; /* 图片高度匹配header */
    object-fit: cover; /* 保持图片比例并填满容器，避免拉伸变形 */
    /* 若需强制拉伸填满（忽略比例），替换为：object-fit: fill; */
}

关键调整说明： #

• 简化HTML嵌套层级，去掉多余的div.image_header，直接将img放入header内
• 给.header设置width: 100%，确保它占满父容器（如#wrapper的80%宽度）
• 为img元素设置width: 100%和height: 100%，让其尺寸完全匹配header
• 使用object-fit: cover保证图片比例的同时填满容器，这是比fill更友好的适配方式；若需求为强制拉伸填满容器，再使用object-fit: fill
• 添加overflow: hidden避免图片超出header边界

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