html - 设置可滚动的背景图像

Question

我目前有这个 fiddle :

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>