可变高度水平图像列表高度100％宽度自动

Question

我有一个项目，其中有一个垂直滚动的图像列表，响应视口大小。这是非常标准的，并按预期工作。当视口达到足够大的大小时，我希望列表变为水平，其中每个列表项是相对于视口的高度 - SO，相反的

我认为将图片设置为height: 100%;和width: auto;可以解决问题，但我认为它比这更复杂。

你知道可以实现这个目标的秘密组合吗？

Example on CodePen

（垂直调整浏览器大小，看看它是如何破坏的）

编辑：与浏览器计算中的宽度与高度问题相关的滚动更少：here is a more targeted CodePen（我仍然想了解） Here is a JS approach我可以同时参与其中：

HTML

<ul class='image-list horizontal'>
    <li>
        <img src='http://placehold.it/1200x900' alt='x'>
    </li>
</ul>

CSS（手写笔）

html, body
    height: 100%

html
    box-sizing: border-box

* //
    box-sizing: border-box

.image-list //
    list-style: none
    margin: 0
    padding: 0
    border: 4px solid blue
    * //
        padding: .3rem
    li //
        border: 4px solid gray
    img //
        display: block
        border: 3px solid #f06

.horizontal
    height: 80% // variable
    max-width: 100%
    white-space: nowrap
    overflow-x: scroll
    li //
        height: 100%
        display: inline-block
    img //
        width: auto
        height: 100%

.vertical
    overflow: scroll
    li //
        width: 100%
    img //
        width: 100%
        height: auto



// just for position
.horizontal
    width: 80%
    float: right
    max-width: 100%
.vertical
    width: 20%
    height: 100%