如何在重叠之前使图像响应式调整为尽可能大的宽度?

Question

我正在设计一个滚动(水平)画廊，从左到右有一长串照片。它们的高度各不相同，有些垂直长，有些水平长。我只想更改宽度，并为每张照片保持相同的纵横比。对于标准尺寸的笔记本电脑屏幕来说，这很容易编码，但它在不同尺寸的屏幕上无法正常工作。

如何使照片响应式更新，使垂直图像与页面上的剩余空间一样高？

目前，我的问题是画廊高于页面底部。

到目前为止，我正在使用 vws 来设置宽度，但仍然遇到此问题。我尝试了使用弹性种植的弹性盒解决方案，但无济于事。

简单地说，

如何响应更新图像宽度以填充页面上的剩余空间？

Answer 1

将height: 100%; width: auto;应用于图像。这将使每个图像的纵横比保持不变，同时使它们的高度均匀，因此滚动的东西看起来不错。

.scroller {
height: 200px;
border: 5px solid black;
overflow: auto;
}
.image-wrapper {
display: flex;
height: 100%;
}
.image-wrapper img {
flex: 0 0 auto;
height: 100%;
width: auto;
}

<div class="scroller">
<div class="image-wrapper">
<img src="https://picsum.photos/200/150" />
<img src="https://picsum.photos/220/300" />
<img src="https://picsum.photos/220/220" />
<img src="https://picsum.photos/160/400" />
<img src="https://picsum.photos/210/150" />
<img src="https://picsum.photos/130/300" />
<img src="https://picsum.photos/200/220" />
<img src="https://picsum.photos/100/200" />
<img src="https://picsum.photos/300/90" />
</div>
</div>