Javascript 将水平滚动div调整为内容

我正在开发一个带有水平滚动部分的web。为此，我只使用了CSS。我的代码旋转容器，使水平滚动成为“自然”滚动。我想要的是调整容器的宽度以适应它所包含的图像，这样它就不允许您滚动到图像之外。这是我的html和css代码

。幻灯片{
高度：80vh；
背景尺寸：自动100vh；
背景重复：重复-x；
宽度：2000vw；
}
.包装纸{
显示器：flex；
弯曲方向：行；
宽度：2000vw；
变换：旋转（90度）translateY（-80vh）；
变换原点：左上角；
}
.外包装{
宽度：80vh；
高度：100vw；
变换：旋转（-90度）translateX（-80vh）；
变换原点：左上角；
溢出y：滚动；
溢出x：隐藏；
位置：绝对位置；
滚动条宽度：无；
-ms溢出样式：无；
}

哪一个比较近

在第一个示例中，我删除了您的“slideone”div，并直接在包装器中使用了img标记。另外，从.wrapper类中删除了宽度设置

在第二个例子中，我使用了div和背景图像。它们现在很大，覆盖了屏幕，要实现这一点，需要在.slide类中进行一些更改

如果这是你想要达到的，我会给这篇文章拉皮条，让其他人看到发生了什么。但我想它已经达到了预期的效果。如果没有，让我们努力吧

---

（图片样本来自instagram.com，最初的所有者是Vola Udabe Randri，aka-以防你感到奇怪）

最后我自己解决了这个问题。关键是使用vh（视口高度）单位来指定包装的宽度，因此比例将始终保持不变。

如果您的目标是使水平滚动变成“自然滚动”，而不是旋转div，您能否在（例如）codesandbox.io/中包含一个活的工作示例，您可以考虑使用CSS <代码>空白：NORRAP < /代码>和<代码>溢出：滚动< /代码>。这样，内容就不会自动换行，只会自然地水平滚动。我不确定这是否可以解决滚动距离图像更远的问题。请尝试使用最大宽度而不是中的宽度。wrapperHi，这个问题是怎么回事？有什么有用的吗？您的解决方案适用于固定宽度的图像，但我想要实现的是负责任的布局，因此图像的高度始终为80vh，但宽度可变，这取决于屏幕分辨率，而不必处理最后的间隙。这种方法是可行的。问题是你想如何调整图像的大小：使用img标签还是使用背景？img元素将是理想的选择，因此我可以用锚来围绕它们。