我有一个水平矩形 div 容器(parent)
里面还有另一个小一点的(child)。
我想让较小的一个(子)看起来像一个圆圈,并且高度应该始终与所有分辨率的父 div 相同。
我找到了很多展示如何制作 1:1 比例 div 的解决方案(例如 this example! ),但所有这些解决方案都是基于 div 的宽度而不是 <强>高度强>。这意味着我需要知道应用解决方案的宽度,但就我而言,我做不到 ,因为我知道高度(父级高度的 100%)但我不知道宽度。
我尝试过调整解决方案,但没有成功。
知道如何在知道 div 高度的情况下制作 1:1 div 吗?
谢谢!
最佳答案
一个巧妙的技巧是使用 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 .
如果需要内容覆盖圆圈, try this 强>。
关于html - Div HEIGHT 和 width 一样做一个圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30083850/