如果有办法做 background-size: cover 并且仍然能够滚动图像

Question

我喜欢 background-size: cover 居中，因为这意味着您的图像完全填满了容器元素。它只是让部分图像溢出到侧面，具体取决于它在容器中的大小。

我现在想做的是能够在 background-size: cover 限制范围内滚动图像。也就是说，如果图像在顶部和底部溢出，我可以上下滚动我的触控板，它在图像上有点 pans 这样你就可以看到它的其余部分覆盖（有点像 Google 地图）。这样，您将获得两个好处：

background-size: cover 的主要优点（居中）完全填充容器。
然而，如果我在上面滚动，我可以看到整个图像。

想知道这是否可能以及如何实现，使用 CSS 或普通 JavaScript。

Answer 1

我认为如果没有一些繁重的 javascript 或库，您无法实现这一点。

有了 html 和 css，这是我能做的最好的了：

.cover{
  width: 180px;
  height: 180px;
  display: inline-block;
  overflow: auto;
  overflow: -moz-scrollbars-none; 
  -ms-overflow-style: none;
}

.cover::-webkit-scrollbar { 
  width: 0 !important;
}

.cover::after {
  content: '';
  display: block;
  width: 240px;
  height: 360px;
  background-image: url(https://picsum.photos/240/360);
}

<div class="cover"></div>
<span>← Scroll this</span>

如果您知道图像的尺寸，它就可以工作，但是您需要手动指定 width 和 height，这有点糟糕。

如果有办法做 background-size: cover 并且仍然能够滚动图像

If there is a way to do background-size: cover and still be able to scroll around the image

javascript

css

scroll

overflow

background-size