根据 flex 显示中的百分比宽度自动设置高度

Question

我有 4 个元素显示 flex。显示为列。标准 zurb 基础网格 25% 宽度。

这些元素是空的，因为它们的作用是作为背景图像的容器（我需要说明这是我不使用 img 的原因）。

以纯粹的css3方式存在，使这个空div的高度自动相同。

width:25% 当这是 250px 高度应该是 25%.

我不能用 JS 来做，但是...如果是纯的就更好了 css 但是我的脑袋是空的。

<div class="instagram-recent grid-x">
  <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)>
  <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)>
  <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)>
  <div class="cell large-3 medium-3 small-12 instagram-individual-image-container" style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21041955_144748202784493_5173738332273770496_n.jpg';)>
</div>

css 是 Zurb Foundation 6.4.2 并且对于每个 .instagram-individual-image-container bacground-size 是 cover

因为 cell large-3 宽度是 25% 我想让 .instagram-individual-image-container 高度是当前宽度的 100%。

提前感谢您的任何提示。

Answer 1

您可以使用 :before 并添加 padding:

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

#parent {
  display: flex;
  flex-flow: row;
}

.child:before{
  content: '';
  padding: 50% 0; /* vertical value as  100% equals width */
  display: inline-block;
}

.child {
  width: 25%;
}

#child1 {
  background: red;
}

#child2 {
  background: blue;
}

#child3 {
  background: green;
}

#child4 {
  background: yellow;
}

<div id="parent">
  <div class="child" id="child1"></div>
  <div class="child" id="child2"></div>
  <div class="child" id="child3"></div>
  <div class="child" id="child4"></div>
</div>

Answer 2

你可以这样做，但是你想放在div中的内容必须放在position:absolute;

https://jsfiddle.net/4jz26uyn/1/

根据 flex 显示中的百分比宽度自动设置高度

Automatically set height based on percentage width in flex display

css

flexbox

zurb-foundation