Header 图片与背景重复：封面；。我怎样才能解决这个问题？

Question

我的目标是创建一个面包店网站，因此标题和图像，并且该网站不会发布到任何服务器。我希望在我调整 window 大小时保持相同宽高比的导航菜单下方的页面顶部有一张图片，但它要求没有高度规范，否则图片将被裁剪当我放大window，以及水平重复。这是我到目前为止的代码：

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

.header-img {
height: 370px;
width: 100%;
  background-repeat: no-repeat;
  background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
  background-size: contain;
}
body {
        background-color:white;
        margin: 0;
        padding: 0;
        text-align:center;
}          
.sticky + .content {
  padding-top: 60px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}
.li {
  float: left ;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
 float: left;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 26px
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
body {
    margin: 0;
    text-align: center;
}

<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">

</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img"  id=#header></div>
</main>
</br>

Answer 1

您需要设置背景大小以覆盖您的css，如下所示。

您可以使用背景位置更改图像的位置属性。

更多信息：

https://www.w3schools.com/cssref/css3_pr_background-size.asp https://www.w3schools.com/cssref/pr_background-position.asp

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

.header-img {
height: 370px;
width: 100%;
  background-repeat: no-repeat;
  background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
  background-size: cover;
}
body {
        background-color:white;
        margin: 0;
        padding: 0;
        text-align:center;
}          
.sticky + .content {
  padding-top: 60px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}
.li {
  float: left ;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
 float: left;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 26px
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
body {
    margin: 0;
    text-align: center;
}

<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">

</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img"  id=#header></div>
</main>
</br>

为了在 width:100% 时保持宽高比，请在 .header-img div 中使用常规图像并像这样修复 css：

.header-img {
  width: 100%;
}

.header-img img {
  width:100%;
  height:auto;
}

对不起，如果我误解了。

Header 图片与背景重复：封面；。我怎样才能解决这个问题？

Header image repeats with background: cover;. How can I fix this?

html

css

resize

cover

header