我正在尝试制作一个带有一些图片的基本组合网站，目的是使其全部适合单个视图，并在用户滚动时从侧面滚动图像。我还有一些纵向图像和其他横向图像，并且希望它们都具有相同的高度，无论宽度如何。让高度对齐导致滚动时出现一些奇怪的行为，其中侧面滚动（用js完成）停止工作，并且当手动横向滚动时，标题随之移动（我可以通过将标题从绝对更改为已修复）。
有没有更好的方法来解决这个问题？
这是一个演示：https://jsfiddle.net/nkbe579j/
这是代码，第 1 页适用于让图像适合我在大屏幕和小屏幕上的需要（通过设置 max-w-none 来完成），但第 2 页适用于我设置的滚动代码（尽管在较小的屏幕上）尺寸，横向图片会缩小以适应屏幕宽度，这是我不想要的）。我似乎无法让两者和谐相处。
<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="">
<div class="absolute top-4 bottom-4 h-12 w-full mb-3 z-20">
<div class="absolute left-5">
HEADER
</div>
<button class="absolute right-5" onclick="changePage()">Change Page</button>
</div>
<div class="absolute top-16 bottom-0 z-0" id="content-container">
<div class="flex flex-row h-screen items-center overflow-y-hidden max-h-full image-container" id="page-1">
Page 1
<!-- Placeholder image links removed due to spam filter -->
<img class="mr-1 max-w-none max-h-full" src="~portait-image~">
<img class="mr-1 max-w-none max-h-full" src="~landscape-image~">
<img class="mr-1 max-w-none max-h-full" src="~portait-image~">
<img class="mr-1 max-w-none max-h-full" src="~landscape-image~">
<img class="mr-1 max-w-none max-h-full" src="~portait-image~">
<img class="mr-1 max-w-none max-h-full" src="~landscape-image~">
<img class="mr-1 max-w-none max-h-full" src="~portait-image~">
<img class="mr-1 max-w-none max-h-full" src="~landscape-image~">
</div>
<div class="flex flex-row h-screen items-center overflow-y-hidden max-h-full image-container hidden" id="page-2">
Page 2
<!-- Placeholder image links removed due to spam filter -->
<img class="mr-1 max-h-full" src="~portait-image~">
<img class="mr-1 max-h-full" src="~landscape-image~">
<img class="mr-1 max-h-full" src="~portait-image~">
<img class="mr-1 max-h-full" src="~landscape-image~">
<img class="mr-1 max-h-full" src="~portait-image~">
<img class="mr-1 max-h-full" src="~landscape-image~">
<img class="mr-1 max-h-full" src="~portait-image~">
<img class="mr-1 max-h-full" src="~landscape-image~">
</div>
</div>
<script>
function changePage() {
document.querySelector('#page-1').classList.toggle('hidden');
document.querySelector('#page-2').classList.toggle('hidden');
}
addEventListener("wheel", (event) => {
// ideally, I'll maintain the active element id and not have both of these here
document.querySelector('#page-1').scrollLeft = document.querySelector('#page-1').scrollLeft - event.wheelDeltaY;
document.querySelector('#page-2').scrollLeft = document.querySelector('#page-2').scrollLeft - event.wheelDeltaY;
});
</script>
</body>
</html>
您可以使用CSS网格创建一个布局，允许水平滚动相同高度的图像。这种方法不需要 JavaScript 来实现滚动功能，并且响应速度更快。
<!DOCTYPE html>
<head>
<style>
.image-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min-content, max-content);
overflow-x: auto;
align-items: center;
height: 100vh;
}
.image-container img {
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="image-container">
<img src="~portrait-image~">
<img src="~landscape-image~">
<img src="~portrait-image~">
<img src="~landscape-image~">
<img src="~portrait-image~">
<img src="~landscape-image~">
<img src="~portrait-image~">
<img src="~landscape-image~">
</div>
</body>
</html>