使用CSS / HTML在半圆中布局组件

Question

我正在创建一个页面，需要显示不同大小的5个圆形组件（图像），我想以半圆形图案显示它们。附加的图像大致显示了我希望布局的外观（想象这些圆圈中的自定义图像）。图像将通过javascript（和Angular）动态设置，这就是我目前将图像定义保留在HTML中的原因。

目前我正在对我的图像进行四舍五入，手动调整它们的大小，然后使用transform：translate（x，y）手动移动它们以创建我的半圆形图案。问题是这不是很动态，如果我想调整我的图像大小，我需要重做数学来制作一个“完美的圆圈”。

这是我目前正在做的代码：

<div class="round top1st" style="background-image: url('image1.png');"></div>
<div class="round top2nd" style="background-image: url('image2.png');"></div>
.
.
.

.round {
    border-radius:50% 50% 50% 50%;  
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
}

.top1st {
    width: 180px;
    height: 180px;
    transform: translate(0px,300px);
}

.top2nd {
    width: 150px;
    height: 150px;
    transform: translate(100px, -30px);
}
.
.
.

有人可以推荐一种更好/更有效的方法吗？还请记住，我的图像需要是各种大小的圆圈，并且它们的图像本身将动态设置（从数据库查询并使用Angular传回客户端）。

Answer 1

如果我是你，我会这样做。

假设您的容器有一个高度（无论是px还是％）我将使用百分比的所有其余大小，并使用position:absolute定位仅top和bottom的圈子。翻译（也有百分比值）。

这样你的圈子就会绝对响应。

唯一的问题是让圆圈完美，因为你的宽度为％，所以在这里我会用一些jquery来计算元素的实际宽度并给高度赋予相同的值：

var cw = $('.top1st').width();
$('.top1st').css({
    'height': cw + 'px'
});

的CSS：

.container {
    width:100%;
    height:400px;
    position:relative;
    background-color:#ddd;
}
.round {
    border-radius:50% 50% 50% 50%;  
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    background-color:red;
    display:inline-block;
    position:absolute;
}
.top1st {
    width: 20%;
    bottom:10%;
    left:8%;
}
.top2nd {
    width: 18%;
    bottom:40%;
    left:28%;
}
.top3nd {
    width: 16%;
    bottom:45%;
    left:50%;
}
.top4nd {
    width: 14%;
    bottom:35%;
    left:70%;
}
.top5nd {
    width: 12%;
    bottom:15%;
    left:85%;
}

当然，您可以根据需要更改这些值，我刚刚做了一个快速的方法。您可以在 FIDDLE

中查看结果

唯一的“小”问题是，如果你调整窗口大小，圆圈会变形，直到你重新加载页面。这不是一个问题，因为用户通常不会这样做，他们只会将圈子放在他们正在使用的任何平台上。