Question

我正在尝试实现以下目标：

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

使用flex相当简单

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

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

奖励积分：

我通常如何指定比率？是否有一种解决方案不仅适用于1：1，而且适用于任何x：y？
在不使用flexbox的情况下又如何实现目标，我该怎么做？

其他信息：想想按钮，蓝色框总是比上方宽。

Answer 1

我不认为有一种使用高度来定义宽度的方法（即使我们可以使用诸如填充之类的技巧来做相反的事情），但一种想法是依靠使您不可见的正方形图像来保持比例。然后将内容定位：

#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>

Answer 2

与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>

Answer 3

看看这是否可以帮助您

.outer {
    background-color: lightblue;
    height: 100px; /* Change as per your requirement */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 200px; /* You can Remove this */
}
.inner {
    background-color: lightyellow;
    height: 50%;
    width: 50px;
}

<div style="" class="outer">

<div id="yellow" class="inner">
</div>

</div>

Answer 4

如果旋转90度，则有可能：）

父级的可变宽度和高度（和比例）
孩子总是比父母高50％
和一个正方形

由于转换，如果需要，它将附加到其他内容。

⇒ Codepen

.flex {
  display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
  width: 12rem;
  height: 20rem;
  vertical-align: middle; /* "vertical" centering */
  transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
  background-color: lightblue;
}

.flex.large {
  height: 35rem;
}

.item {
  width: 50%;
  height: 0;
  margin-left: 25%; /* "horizontal" centering */
  padding-top: 50%; /* padding-top trick for a square */
  background-color: lightyellow;
}

<div class="flex">
  <div class="item"></div>
</div>

<hr>

<div class="flex large">
  <div class="item"></div>
</div>

Answer 5

如果可以帮助您，请尝试此操作。（不带弹性）

!q

带平方比和flexbox的内部div

5 个答案: