额外的 div 导致图像高度无法正确缩放（显示：flex）

Posted 2023-03-05

【中文标题】额外的 div 导致图像高度无法正确缩放（显示：flex）

【英文标题】：Extra div causing the image height not scaling properly (display: flex)

【发布时间】：2018-01-23 02:05:52

【问题描述】：

我从here 获取代码。代码运行良好，但是当我添加了一个额外的 div 以使用类 fullwidth 包装 div 时，图像高度不会根据屏幕的高度进行同等缩放。

这是它最初的样子：

body,
html 
  height: 100%;


.fullwidth 
  display: flex;
  flex-direction: column;
  height: 100%;


.repeat-x 
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;


.bg-1 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-2 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-3 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);

<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>
</div>

在用另一个div 包裹fullwidth 之后：-

body,
html 
  height: 100%;


.fullwidth 
  display: flex;
  flex-direction: column;
  height: 100%;


.repeat-x 
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;


.bg-1 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-2 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-3 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);

<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>

【参考方案1】：

您可以选择其中之一将#newid 放大到当前视口的整个高度：

#newid 
  height: 100vh; /* this is how you do it in 2017 */
  height: 100%;

供参考：如果您想深入了解 CSS 单元，我强烈推荐这篇文章：CSS Units - What is the difference between vh/vw and %?

【讨论】：

100vh 仅在您明确希望它与视口高度相同时才有效 - 如果您的容器嵌套在另一个部分高度的容器中，这通常是不希望的。

确实如此，但这里的情况并非如此，正如@kukkuz 所说：“图像高度不会根据屏幕高度而同等缩放。”。

是的，我只是认为最好明确说明，以防有人浏览并认为“哦，100vh 是 100% 的新奇替代品！”。再说一次，如果他们不关注您的链接，他们可能也不会阅读 cmets，所以……

【参考方案2】：

将height: 100% 添加到newid 容器 - 这允许flexbox 继承文档的height。

请看下面的演示：

body,
html 
  height: 100%;


#newid 
  height: 100%;


.fullwidth 
  display: flex;
  flex-direction: column;
  height: 100%;


.repeat-x 
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;


.bg-1 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-2 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);


.bg-3 
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);

<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>

【参考方案3】：

将此添加到您的 CSS：

#newid 
  height: 100%;