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

概述参见英文答案 > Maintain the aspect ratio of a div with CSS                                    19个 我试图实现以下目标： 蓝色框的高度可变,黄色框的高度始终为蓝色框的50％. 使用flex非常简单 <div style="display:flex;align-items:center"> <div id=" 参见英文答案 > Maintain the aspect ratio of a div with CSS19个
我试图实现以下目标：

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

使用flex非常简单

<div >    <div ID="yellow" >    </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 >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 >Some content here</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 内部div与方形比率和flexbox全部内容，希望文章能够帮你解决html – 内部div与方形比率和flexbox所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。