html - 具有平方比和flexbox的内部div

This question already has answers here:

Maintain the aspect ratio of a div with CSS
                                
                                    （23个答案）
                                
                        
                                2年前关闭。
            
                    
我试图实现以下目标：



蓝色框的高度可变，而黄色框的高度始终是蓝色框的50％。

使用flex相当简单

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

问题是我试图将内盒保持特定的比率，在这种情况下为正方形。我该如何处理？



奖励积分：


我通常如何指定比率？是否有一种解决方案不仅适用于1：1，而且适用于任何x：y？
在不使用flexbox的情况下又如何可能仍要瞄准a），我该怎么做？




额外信息：想一个按钮，蓝色框总是比上方宽。

最佳答案

与Temani Afif提供的答案类似，但使用的是svg而不是图像（因此不需要额外的请求）。

而且，更容易将其适应于任意宽高比

.container {
  height: 150px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.aspectRatio {
  display: grid;
  background-color: yellow;
  height: 50%;
}
.aspectRatio svg {
  height: 100%;
  border: solid 1px red;
  animation: resize 1s infinite;
}
.aspectRatio > * {
  grid-area: 1 / 1 / 2 / 2;
}

@keyframes resize {
  from {height: 100%;}
  to {height: 99.9%;}
}

<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 1 1"></svg>
    <div class="inner">square</div>
  </div>
</div>
<div class="container">
  <div class="aspectRatio">
    <svg viewBox="0 0 4 3"></svg>
    <div class="inner">ratio 4/3</div>
  </div>
</div>

关于html - 具有平方比和flexbox的内部div ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51813267/