如何通过垂直滚动来拉伸图像列表以填满屏幕答案

【问题标题】：How to stretch list of images with vertical scrolling to fill screen如何通过垂直滚动来拉伸图像列表以填满屏幕
【发布时间】：2022-02-10 16:39:45
【问题描述】：

我有一个看起来像这样的 html 代码：

<ul>
  <li>
      <img src='...'
  </li>
  <li>
      <img src='...'
  </li>
  <li>
      <img src='...'
  </li>
...

scss 代码如下所示：

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  align-items: center;


  li {
    flex: 0 0 auto;
    position: relative;
    justify-content: center;
    background-color: white;
    box-sizing: border-box;
    padding: 10px 10px 25px;
    margin: 5px 5px 0 0;
    user-select: none;
    transition: background-color 0.5s;
  }
}

结果是一个图像列表，垂直滚动时，图像具有其原始分辨率。我想要做的是拉伸图像，以便每个图像填充页面宽度的 70% 或 100% 等等。我尝试添加一个 img { width: 50vw; ，或者将 li 宽度设置为百分比或 vw 的不同宽度，但到目前为止没有任何效果，有什么想法吗？结果： https://imgur.com/0Q94QXe

【问题讨论】：

请截图，以便我们更好地理解问题
添加你的结果 img 兄弟。
@KakSarkar 我添加了图片链接。如您所见，有多张照片，一张在另一张下方，照片的宽度没有填满整个空间
@JibinJohn 刚刚添加
@randomusernamessssss 请将您的代码放入笔 (codepen.io) 中，这样我们可以编辑并使您的代码以这种方式工作，我们无法理解问题

标签： css sass

【解决方案1】：

问题不在于代码，而在于图像，如果图像太小它不会延伸到整个屏幕，除非强制使用 px 不拉伸

但如果图像质量好且分辨率相当高，则仅设置width: 100%; 并且一切正常。

如果我的代码没有帮助，请更新您的代码并添加图片。

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  align-items: center;


  li {
    flex: 0 0 auto;
    position: relative;
    justify-content: center;
    background-color: white;
    box-sizing: border-box;
    padding: 10px 10px 25px;
    margin: 5px 5px 0 0;
    user-select: none;
    transition: background-color 0.5s;
  }
  img{
    width: 100%;
  }

<ul>
  <li>
      <img src='https://wallpaper.dog/large/994963.jpg'
  </li>
  <li>
      <img src='https://wallpaper.dog/large/994963.jpg'
  </li>
  <li>
      <img src='https://wallpaper.dog/large/994963.jpg'
  </li>
</ul>

【讨论】：