HTML CSS图片顶部全屏填充异常问题求助

问题根源 #

• 错误的边距重置方式：给html,body设置margin: -10px来抵消默认边距是不合理的，浏览器默认body边距通常为8px，负margin会导致元素超出视口，反而引发布局错乱，正确做法是直接将默认边距设为0。
• 容器内边距导致空白：.cont的padding: 10px会给图片上下左右各添加10px空白，这就是你看到的20px无法填满区域的直接原因。
• 图片固定宽度不兼容：图片用width: 1600px固定值，无法适配不同屏幕宽度，应该用百分比宽度占满容器。

修正后的代码 #

CSS代码

html, body {
    width: 100%;
    height: 100%;
    margin: 0; /* 重置默认边距 */
    padding: 0;
    overflow: hidden;
}

img {
    width: 100%; /* 占满容器宽度 */
    height: 300px;
    opacity: 0.7; /* 标准写法用小数，兼容性更好 */
    object-fit: cover;
    object-position: top; /* 让图片顶部对齐容器 */
}

.cont {
    position: relative;
    text-align: center;
    padding: 0; /* 移除内边距 */
}

.main-text {
    font-size: 100px;
    color: white;
    position: absolute;
    top: 100px;
    left: 70px;
}

HTML代码

<body>
    <div class="cont">
        <img src="https://i.sstatic.net/DWZAk.jpg">
        <div class="main-text">Big Ass Title</div> 
    </div>
</body>

额外说明 #

• 如果希望图片高度适配视口顶部区域，可将img的height改为100vh（视口高度的100%），object-fit: cover会保证图片比例不变，自动裁剪多余部分。
• opacity属性推荐用小数写法（如0.7对应70%），比百分比写法的浏览器兼容性更好。

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