html - 如何在图像上覆盖可滚动容器中的图像

Question

我有一张不同尺寸的图片。此图像在容器内，容器内有 overflow: auto .我想在此图像上放置一个网格 - 只要图像小于容器，它就可以正常工作。只要容器有滚动条，网格覆盖就会限制在容器的高度/宽度内，不会覆盖图像。

请注意 fixed不是一个选项，因为这是一个简化的用例。我确实需要叠加层实际与图像一起滚动。

(实际用例会有多个覆盖，但对于这个演示，单个覆盖应该足以演示问题)。

缩放图像也不是一个选项。

将图像放在不同的标签中可能是一个选项，但由于图像大小可能会有所不同，我不能有一个固定大小的 div 将图像作为背景图像 - 至少我不知道如何使该 div 具有图像的实际大小。

我想如果 <img> 就好了可能是叠加层的容器，但 AFAIK，img是一个不允许有 child 的自闭标签。

其他类似问题用户建议使用height: auto; min-height: 100%;对于覆盖层，但这不起作用，因为容器的大小并没有真正改变，只是内容变得可滚动。

如果可能的话，我想避免 JS 来计算叠加层的高度和宽度。

.container {
  position: relative;
  height: 200px;
  overflow: auto;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-image: repeating-linear-gradient(  0deg, transparent, transparent 10px, #EEE 10px, #EEE 11px),
                        repeating-linear-gradient(-90deg, transparent, transparent 10px, #EEE 10px, #EEE 11px);  
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>

Answer 1

CSS-Grid 可以做到这一点..不需要 position 值。

.container {
  height: 200px;
  display: inline-grid;
  overflow: auto;
}

img,
.overlay {
  grid-column: 1;
  grid-row: 1;
}

.overlay {
  z-index: 2;
  background-image: repeating-linear-gradient( 0deg, transparent, transparent 10px, #eee 10px, #eee 11px), repeating-linear-gradient( -90deg, transparent, transparent 10px, #eee 10px, #eee 11px);
}

<div class="container">
  <img src="https://lorempixel.com/500/500/" />
  <div class="overlay"></div>
</div>