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

Question

我的问题是，当显示变小时，我的背景图像缩小了标题，我希望我的图像填充（不拉伸）我的整个标题。

http://php.net/manual/en/faq.passwords.php

正如你在我的代码工作完美的图像中看到的那样，直到我将浏览器尺寸缩小到手机大小，我的图像开始缩小

我希望我的图像覆盖（填充不拉伸）整个标题

这是我的代码： -

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;


}

Answer 2

您应该将img标记保留在此范围之外。这不是必需的。

您应该只设置标题的background-image，然后设置background-size: cover。这将用您想要的图像填充标题容器。

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

以下是工作的代码集示例：https://codepen.io/michelengelen/pen/LQzmjE

Answer 3

在html中使用css而不是img标签来使用背景图片。

header {
  width: 100%;
  height: 320px;
  background: url("images/index/header/header.jpg") center center no-repeat;
  background-size: cover;
}