我想让一个元素具有相同的宽度和高度，所以它是一个完美的正方形。然而，宽度不是一个集合 value 而是由视口加上一些空白定义。空白是由一些 grid fr 单位加上一些在 dsired 元素和它的父元素之外的边距和填充定义的。所以我还没有找到一种简单的方法来计算像 --size: 100vw - **whitespace** 这样的东西。如果可能，我想通过仅使用 CSS 来实现这一点。
这是一个工作示例：
* {
box-sizing: border-box;
}
.example {
display: flex;
flex-wrap: wrap;
}
.example > div {
background-color: teal;
border: 4px solid blue;
border-top: 0;
border-bottom: 0;
}
.taller {
flex-basis: 40%;
height: 500px;
}
.shorter {
flex-basis: 60%;
height: 250px;
}
.perfectCircle {
border: 4px solid red;
--size: 100%;
width: var(--size);
height: var(--size);
border-radius: 50%;
position: relative;
}
.perfectCircle > p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
flex-basis: 100%;
}<div class="example">
<p>The width of the teal containers should define the size of the perfect <del>square</del> circle inside</p>
<div class="taller">
<div class="perfectCircle">
<p>
This should ALWAYS be a perfect <del>square</del> circle and leave whitespace on top or bottom if needed.
</p>
</div>
</div>
<div class="shorter">
<div class="perfectCircle">
<p>
This should ALWAYS be a perfect <del>square</del> circle and overflow the container if needed.
</p>
</div>
</div>
</div>回答1
为此有一个 CSS 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
aspect-ratio CSS 属性设置框的首选纵横比，将用于计算自动尺寸和其他一些布局功能。
与 Internet Explorer 不兼容
article {
width: 40%;
margin: 1em 30%;
padding: 0;
background: lime;
}
section {
width: 80%;
margin: 10%;
background: brown;
}
div {
width: 100%;
background: black;
aspect-ratio: 1 / 1;
}<article>
<section>
<div></div>
</section>
</article>