Question

我使用Flexbox CSS模型开发了以下布局：

＆＃13;

html {
  box-sizing: border-box;
  overflow-y: none;
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
#all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #03a9f4;
}
#app {
  width: 500px;
  background: #ffffff;
  border: solid 6px yellow;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 4px blue;
}
#header-para-container {
  flex: 1;
}
#header-image-container {
  flex: 0.6;
  background: #888;
}
#header-image-container > img {
  display: block;
  width: 100%;
  height: auto;
}
section {
  display: flex;
  flex-wrap: wrap;
  border: solid 4px tomato;
}
figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  border: solid 4px green;
}
figure > img {
  max-width: 80%;
  height: auto;
}

＆＃13;

<div id="all">
  <div id="app-container">
    <div id="app">
      <header>
        <div id="header-para-container">
          <p>Hello, this is CSS flexbox layout. Thank you for visiting this page.</p>
        </div>
        <div id="header-image-container">
          <img src="http://placekitten.com/g/300/300" />
        </div>
      </header>
      <section id="grid-images">
        <figure>
          <img src="http://placekitten.com/g/300/300" />
        </figure>
        <figure>
          <img src="http://placekitten.com/g/300/300" />
        </figure>
        <figure>
          <img src="http://placekitten.com/g/300/300" />
        </figure>
        <figure>
          <img src="http://placekitten.com/g/300/300" />
        </figure>
      </section>
    </div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/petebere/fsLpw1vb/

当视口高度减小时，您是否知道如何相应地降低图像和主要显示元素（黄色框）的高度？

我们的想法是黄色框架中的元素应始终完全可见，并且不需要垂直滚动。

在视口高度下降时，黄色容器的高度保持不变。这可能是因为浏览器希望保留我已应用于标题图像容器的大小：

#header-image-container {
  ...
  flex: 0.6;
  ...
}

以及网格图像的容器：

figure {
  ...
  flex-basis: 50%;
  ...
}

我已经制作了这张图片，以展示我在窗户高度降低时想要达到的目标：

Answer 1

图像不会缩放，因为它们不会在其直接容器上以固定高度绑定。

例如，布局中的第一个图像（在header部分中）既没有父级（.header-image-container）也没有祖父级（header）具有定义的高度。这是实际的代码：

header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 4px blue;
}

#header-image-container {
  flex: 0.6;
  background: #888;
}

使用上面的代码，图像无需响应。没有高度限制。

请改为尝试：

header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 4px blue;
  height: 20vh; /* NEW */
}

#header-image-container {
  flex: 0.6;
  background: #888;
  height: 100%; /* NEW */
}

#header-image-container > img {
  /* display: block; */
  /* width: 100%; */
  /* height: auto; */
  height: 100%; /* NEW */
}

revised demo

上述相同的概念适用于#grid-images部分：

section {
  display: flex;
  flex-wrap: wrap;
  border: solid 4px tomato;  
  height: 60vh; /* NEW */
}

figure {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  border: solid 4px green;
  height: 50%; /* NEW */
}

figure > img {
  /* max-width: 80%; */
  /* height: auto; */
  height: 100%; /* NEW */
}

revised demo

附加说明：

在原始代码中，您尝试使用width: 100%; height: auto（在标题部分中）和max-width: 80%; height: auto（在网格部分中）使图像响应。此设置（使用百分比宽度）更适合水平屏幕重新调整大小。您的问题寻求垂直重新调整大小，因此请改用百分比高度。
在原始布局中，您可能已经注意到，当您降低屏幕高度时，布局会消失在屏幕顶部，而无法通过垂直滚动进行访问。这是flexbox的一个已知问题。解决方案是在居中的flex项目上使用margin: auto，而不是在Flex容器上使用justify-content: center; align-items: center。完整详情：Can't scroll to top of flex item that is overflowing container

在flex布局中调整图像的高度

1 个答案: