如何在屏幕尺寸变化和使用大图片时保持图像正确对齐

Question

我正在制作一个显示大图片的网站，前一张总是与下一张重叠。保持整个网站尽可能响应的最佳方式是什么。

我尝试制作一个长 div 并使用相对位置定位每张图片，然后调整位置使其重叠并正确定位。但是一旦屏幕尺寸发生变化，这种方式就不能正常工作了。

有替代方案的想法吗？

这是这个想法的图片： enter image description here

已经感谢您的帮助

Answer 1

在使用属性position: relative 和top、right、bottom 和left 时，您是否尝试过使用像vw（视口宽度）或vh（视口高度）这样的响应单元)?

类似这样的东西，例如：

.relative {
  position: relative;
  left: 20vw;
}

如果您还将vw 用于图像的width 和height 属性，它应该可以正常工作，因为这将使您的所有尺寸都相对于视口的宽度。

#img1 {
    background-color: rgb(253, 7, 7);
    width: 70vw;
    height: 50vw;
    position: relative;
    left: 5vw;
}

#img2 {
    background-color: rgb(238, 138, 7);
    width: 70vw;
    height: 50vw;
    position: relative;
    left: 20vw;
    top: -7vw;
}

<div id="img1">Img 1</div>
<div id="img2">Img 2</div>

另一种可能性是使用网格布局 (display: grid)。