html - Div HEIGHT 和 width 一样做一个圆

Question

我有一个水平矩形 div 容器(parent)

里面还有另一个小一点的(child)。

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

我找到了很多展示如何制作 1:1 比例 div 的解决方案(例如 this example! )，但所有这些解决方案都是基于 div 的宽度而不是 <强>高度 。这意味着我需要知道应用解决方案的宽度，但就我而言，我做不到，因为我知道高度(父级高度的 100%)但我不知道宽度。

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

知道如何在知道 div 高度的情况下制作 1:1 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 。