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

Question

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

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

scs代码如下：

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://i.stack.imgur.com/5FWz4.jpg

Answer 1

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

但是如果图像是具有相当高分辨率的良好质量，则仅设置CCD_。

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

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>