使用DIV保留纵横比

Question

tl; dr
Square类应为所有测试柜中的平方。

以下HTML包括三个测试容器。 所有测试容器都包含一个弹性盒，该弹性箱可容纳三个Divs。中间的DIV具有Square类，并且（如名称所建议的）应为所有测试柜中的平方。 Square应尽可能多地填充容器的空间，但当然不应超过它。

我已经找到了一个解决方案在这里，但它失败了在第二和第三个测试柜上。

如果可能的话，该解决方案不应包含JavaScript，并且不应在可能的情况下使用fack-Ratio，因为当前它的浏览器支持不良。

感谢任何帮助。

codepen

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  background-color: yellow;
}

<!-- 1. Testcase -->
<div class="container" style="width: 200px; height: 400px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

<!-- 2. Testcase -->
<div class="container" style="width: 400px; height: 200px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

<!-- 3. Testcase -->
<div class="container" style="width: 200px; height: 200px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

Answer 1

除非您需要支持不弃用的IE，否则可以使用expact-ratio：

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  background-color: yellow;
  aspect-ratio: 1 / 1;
  width: 100%;
}

<!-- 1. Testcase -->
<div class="container" style="width: 200px; min-height: 400px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

<!-- 2. Testcase -->
<div class="container" style="width: 400px; min-height: 200px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

<!-- 3. Testcase -->
<div class="container" style="width: 200px; min-height: 200px">
  <div class="simple">Hello</div>
  <div class="square">World</div>
  <div class="simple">Hello</div>
</div>

Answer 2

要使您.square元素要保持正确的长宽比，而无需aptive> aptive-ratio prop，您可以使用pseudo Elements，请参阅：

另请参阅：另外，如果您不想使用网格方法，您可以制作此容器相对，并且它的子跨度元素 - 绝对，如果需要，请使用正确的定位。

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: red;
}

.simple {
  width: 100%;
  background-color: green;
}

.square {
  display: grid;
  grid-template-areas: 'content';
  background-color: yellow;
  width: 100%;
}

/* place text content and square pseudo el. to same cell */
.square:before,
.square > span {
  grid-area: content;
}

.square:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: 100%; /* make it square */
}

<!-- 1. Testcase -->
<div class="container" style="width: 200px; min-height: 400px">
  <div class="simple">Hello</div>
  <div class="square"><span>World</span></div>
  <div class="simple">Hello</div>
</div>

<!-- 2. Testcase -->
<div class="container" style="width: 400px; min-height: 200px">
  <div class="simple">Hello</div>
  <div class="square"><span>World</span></div>
  <div class="simple">Hello</div>
</div>

<!-- 3. Testcase -->
<div class="container" style="width: 200px; min-height: 200px">
  <div class="simple">Hello</div>
  <div class="square"><span>World</span></div>
  <div class="simple">Hello</div>
</div>