Question

我目前有这个小提琴：

https://jsfiddle.net/0g3u8452/1/

我有一张1920x4000的图片，我希望它能像

一样占据整个屏幕宽度

background-size: cover

但是由于图像的高度很重要，我希望能够向下滚动以继续看到它

我对要获得的结果进行了描述：

在此先感谢您的帮助：）

Answer 1

尝试使用<img>作为背景的position: absolute吗？

.container {
  position: relative;
}
.container img.background-img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
body {
  padding: 0;
  margin: 0;
}

<div class="container">
  <img src="http://via.placeholder.com/1920x4000" class="background-img">
  <div class="other">Other elements</div>
</div>

Answer 2

这就是您要达到的FIDDLE

.bg {
 height: 4000px;
}

Answer 3

您是否正在寻找类似this的东西？我只是改变了一点。

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>

    <div class="bg">
      <div class="cont"></div>

    </div>
  </body>

</html>


body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  height: 100%;
  width: 100%;
}

.main {
  width: 100%;
  height: 100%;
}

.cont {
  width: 100%;
  height: 4000px;
  background-image: url("http://via.placeholder.com/1920x4000");
}

设置可滚动的背景图像

3 个答案: