Question

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

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

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

到目前为止，我正在使用vws来设置宽度，但是仍然存在此问题。我尝试了使用flex-grow的flexbox解决方案，但无济于事。

简而言之，

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

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>

如何在重叠之前将图像快速调整为最大宽度？

1 个答案: