html - 随着显示变小，我的背景图像在标题中缩小

Question

我的问题是随着显示变小，我的背景图像在标题中缩小，我希望我的图像填充(而不是拉伸(stretch))我的整个标题。

正如你在两张图片中看到的那样，我的代码运行完美，直到我将浏览器大小减小到手机大小，我的图片开始缩小

我希望我的图像覆盖(填充而不是拉伸(stretch))整个标题

这是我的代码:-

html:-

  <header>
        <img src="images/index/header/header.jpg">
  </header>

CSS:-

header {
    width:100%; 
    height:320px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:1px solid lightgreen;
    object-fit: fill;
    background-position: center center;
    display: flex;


}

header img {
    width:100%;
    background-size: cover;
    margin: 0 auto;
}

Answer 1

在图像标签中使用 position:absolute 和 height:100%，例如:-

header img {
    position:absolute;
    width:100%;
    height:100%;
    background-size: cover;
    margin: 0 auto;
}

您也可以在背景中使用图像而不是标题。

header {
    width:100%; 
    height:320px; 
    position:relative;
    overflow:hidden; 
    z-index:-1;
    border:1px solid lightgreen;
    background-position: center center;
    display: flex;
    background-image:url("images/index/header/header.jpg");
    background-size: cover;


}