html – 内部div与方形比率和flexbox

参见英文答案 > Maintain the aspect ratio of a div with CSS                                    19个
我试图实现以下目标:

enter image description here

蓝色框的高度可变,黄色框的高度始终为蓝色框的50%.

使用flex非常简单

<div style="display:flex;align-items:center">
    <div id="yellow" style="height:50%">
    </div>
</div>

问题是我试图保持内箱的特定比例,在这种情况下是方形.我该如何处理?

奖励积分:

>我如何指定一个比例?有解决方案不仅适用于1:1,还适用于任何x:y?
>如果不使用flexbox,我怎么能这样做,而潜在的目标仍然是a)?

额外信息:蓝色框总是宽于更高,想一个按钮.

我不认为有一种方法可以使用高度来定义宽度(即使我们可以使用像填充这样的技巧来做相反的事情)但是一个想法是依靠一个你看不见的方形图像来保持比率.然后应该定位内容:

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  height:80vh;
  background: blue;
}

#yellow {
  height: 50%;
  background: yellow;
  position:relative;
}
img {
 max-height:100%;
 visibility:hidden;
}
#yellow .content {
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
}
<div id="blue" >
  <div id="yellow" >
    <img src="https://picsum.photos/500/500?image=1069" >
    <div class="content">Some content here</div>
  </div>
</div>

但是如果蓝色的高度是固定值,最好依赖CSS变量:

#blue {
  display: flex;
  align-items: center;
  justify-content:center;
  --h:80vh;
  height:var(--h);
  background: blue;
}

#yellow {
  height: calc(var(--h) / 2);
  width:calc(var(--h) / 2);
  background: yellow;
  position:relative;
}
<div id="blue" >
  <div id="yellow" >
    <div class="content">Some content here</div>
  </div>
</div>
https://stackoverflow.com/questions/51041691/inner-div-with-square-ratio-and-flexbox

转载注明原文:html – 内部div与方形比率和flexbox