时间戳

首页 > 解决方案 > 如何使我的内容在水平和垂直方向上都响应屏幕尺寸？

html - 如何使我的内容在水平和垂直方向上都响应屏幕尺寸？

问题描述

我尝试制作一个带有容器和内容“响应式”的页面，该页面会随着窗口（尤其是高度）而减小。

目前我的代码允许减少宽度但不能减少高度。有可能这样做吗？

我当前的代码：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>

谢谢你的帮助。

标签： htmlcssflexbox

解决方案

图像仅在水平调整大小时缩放，因为它们的大小使用视口宽度单位( vw)。

img {
  width: 22.5vw;
  height: 35vw;
}

如果您希望它们在垂直调整大小时重新调整大小，那么您将使用视口高度单位( vh)。

如果您希望它们在垂直和水平 re-size 上进行缩放，请尝试使用vminorvmax单位。

修改后的演示

https://drafts.c​​sswg.org/css-values/#viewport-relative-lengths

推荐阅读