Div HEIGHT与宽度相同以制作圆

Question

我有一个水平矩形div容器（父）

另一个较小的内部（孩子）。

我想让较小的一个（孩子）看起来像一个圆圈，高度应始终与所有分辨率的父div相同。

我找到了很多解决方案，展示如何制作 1：1比例div （例如，this example!），但所有这些解决方案都是基于div的宽度而不是身高。这意味着我需要知道应用解决方案的宽度，但在我的情况下，我不能这样做 因为我知道高度（父母高度的100％），但我不知道宽度。

我试图调整解决方案，但我没有成功。

我知道如何让1：1的div知道div的高度吗？

谢谢！

Answer 1

一个光滑的技巧是使用1：1图像作为吊具：

.outer {
    overflow: hidden;
}
.inner {
    border-radius: 50%;
    height: 100%;
    display: inline-block;
}
.inner img {
    max-height: 100%;
    opacity: 0;
}

<div class="outer">
    <div class="inner">
        <img src="http://placehold.it/500x500" alt="" />
    </div>
</div>

您可以使用文件较小的纯色图像或SVG图像。的 More on that

<强> Demo

如果您需要内容覆盖圈子， try this 。

Answer 2

您可以使用此类在一般情况下圈出几乎所有内容：

.circle {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
}