Question

我尝试使包含容器和内容的页面“响应”成随窗口减小，尤其是高度减小的页面。

当前，我的代码允许减小宽度，但不能减小高度。可以这样做吗？

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>

感谢您的帮助。

Answer 1

图像仅按水平调整大小缩放，因为它们以视口宽度单位（after_save）调整大小。

vw

如果您希望它们在垂直方向上重新调整大小，则可以使用视口高度单位（img { width: 22.5vw; height: 35vw; }）。

如果您希望它们在垂直和水平方向上都缩放，请尝试使用vh或vmin单位。

revised demo

https://drafts.csswg.org/css-values/#viewport-relative-lengths

Answer 2

问题已解决，这里我们使用不同的属性来管理高度和宽度。

演示here。

HTML

  <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>

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width:auto;
}

body {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
}

img {
  width: 45vmin;     /*here we use vmin rather than vh or vw*/
  height: 70vmin;    /*here we use vmin rather than vh or vw*/
  margin: 0;
  object-fit: cover;
}
.wrapper {
  display: flex;
}

.list {
  width: 100vw;
  height: 100vh;    /*here we add height proprietie !important!*/ 
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  align-items: center;
}

.list a {
  margin: 0%;
  padding: 0 4%;
}

感谢您的帮助:-)

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

2 个答案: