为什么一个 object 比另一个大（从两侧重叠）- CSS？

Question

我正在尝试用图像创建 header，淡入淡出并添加标题 & sub-title。我为淡入淡出框创建了一个新的 div（并为 h1 和 h2 创建了一个单独的 div，因此它可以位于图像的底部）。但是不知何故，淡入淡出容器比图像宽，我不知道如何使它们大小相同！如果有任何帮助，我将不胜感激。我对这一切都很陌生！

https://i.stack.imgur.com/LZhLn.png

HTML:

<body>
<header>
    <img src="">
    <div class="container">
        <div class="title">
            <h1>title</h1>
            <h2>subtitle</h2>
        </div>
    </div>
</header>
</body>

CSS:

body {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
header {
    position: relative;
}
img {
    object-fit: cover;
}
.container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
    background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.1));
}
.title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

您的代码执行此操作很奇怪，但请尝试使 img 成为容器宽度的 100%。

否则稍微实验一下，如果你想让header、container和image都是屏幕的宽度，设置header的宽度为100vh，然后将container和image设置为100%

img {
    width: 100%;
}

为什么一个 object 比另一个大（从两侧重叠）- CSS？

Why is one object bigger than the other (overlaps out of the sides) - CSS?

html

css

position

width