Question

我有一个带封面图片的网站。问题是当用户调整窗口大小时，背景不会保持固定和全高。

我想要的：当用户调整窗口大小时，背景图像保持固定和全高的方式。

这是我到目前为止所做的：

#top {
  width: 100%;
  height: 200px;
  border-bottom: 1px solid black;
  background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

http://jsfiddle.net/h64vyr60/

Answer 1

您可以将background-size设置为initial，或删除background-size属性。这将在页面调整大小时保留图像高度。

#top{
 width: 100%;
 height:200px;
 border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
 background-size: initial;
 background-position: top center;
 background-repeat:no-repeat;
 background-attachment:fixed;
}

<div id="top"></div>

希望能帮到你！

Answer 2

这是你在找什么？

只需将背景大小设置为封面，然后添加媒体查询：

＆＃13;

#top{
 width: 100%;
 height:200px;
 border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
 background-size: contain;
 background-position: top center;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
@media screen and (max-width:900px) {
  #top{ background-size: 900px auto;} //900px is the image original width
}

＆＃13;

<div id="top"></div>

＆＃13;

https://jsfiddle.net/hwzhsrer/

调整窗口大小时如何保持背景全高

2 个答案: