我尝试制作一个容器和内容“响应式”的页面，该页面会随窗口缩小，尤其是高度。
目前我的代码允许减少宽度但不能减少高度。可以这样做吗？
我当前的代码:https://jsfiddle.net/u1Ld5r7v/1/
html,
body {
margin: 0;
padding: 0;
height: 100vh;
width: auto;
}
body {
height: 100%;
overflow: hidden;
}
main {
display: flex;
}
img {
width: 22.5vw;
height: 35vw;
margin: 0;
object-fit: cover;
}
.wrapper {
display: flex;
}
.list {
height: 100vh;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
align-items: center;
padding: 0;
}
.list a {
margin: 0%;
padding: 0 4%;
}<body>
<main class="wrapper">
<div class="list">
<a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
<a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
<a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
<a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
<a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
<a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
</div>
</main>
</body>感谢您的帮助。
最佳答案
图像仅在水平调整大小时缩放，因为它们是用视口(viewport)宽度单位 (vw) 调整大小的。
img {
width: 22.5vw;
height: 35vw;
}
如果您希望它们在垂直调整大小时调整大小，那么您将使用视口(viewport)高度单位 (vh)。
如果您希望它们在垂直和水平调整大小时缩放，请尝试使用vmin 或vmax 单位。
https://drafts.csswg.org/css-values/#viewport-relative-lengths
关于html - 如何使我的内容在水平和垂直方向上响应屏幕尺寸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56482240/