参见英文答案 >
Maintain the aspect ratio of a div with CSS19个
我试图实现以下目标：
我试图实现以下目标：
蓝色框的高度可变,黄色框的高度始终为蓝色框的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>
