通过快速滚动

Question

我想要一个高分辨率的图像用于简单但响应迅速的“即将推出的页面”。图像比宽度高3倍，并且本身包含徽标，并且在this example中散布在三个窗格中的一些居中文本。

要使这个网页在大屏幕和小屏幕上都能正常工作，

会很棒

1. 自动将图像高度调整为浏览器高度的3倍
2. 保持宽高比
3. 设置最小图像像素宽度，以便“最宽文本模糊”永远不会被切断
4. 根据需要允许图像溢出以完成1.而不创建水平滚动条
5. 在窗格之间滚动捕捉会很棒。

解决方案的各个部分

1. 一开始我在宽度或高度设置上使用vw或vh，但也许我应该缩放到视口以外的其他内容。
2. 通过指定宽度或高度来维持宽高比，但不能同时指定两者，
3. 只需使用CSS min-width
4. 此SO post并回答fiddle帮助，但在我尝试缩放图片时会中断。
5. 我已尝试将图像切割成3个不同的图像并将它们放在此scroll snap demo中的div中，但窗格最终重叠。滚动不一定要显示整个窗格，而应该捕捉到窗格的水平中心

如何将上面的部分解决方案（或其他部分）混合在一起以形成如图所示的图像比例？我有很多失败的小提琴我可以分享，但它们都没有真正起到优势。

更新 imgr链接中描述的文本不是文本的占位符，它将在div中，但本身在图像中。为任何困惑道歉