html - 将小图像放置在大图像周围的圆形阵列中

Question

我正在尝试找到一种干净的方法，以圆形方式在大图像周围 float 多个图像气泡。

每张图片可能不会超过六个气泡，但我想找到一种递归和响应式的方式来将这些气泡定位在任何大小父图像周围。这些父图像将具有相同的高度/宽度并且不低于 100 像素。 (100 x 100、130 x 130 等等)

不确定如何做到最好，同时使其响应屏幕尺寸并在所有主要浏览器上均受支持。如果这可以用纯 css/sass 完成，并且没有外部库，我也更愿意。

到目前为止的代码:http://jsfiddle.net/qatkr261/1/

HTML

<div id="body">
    <div id="background">
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
    </div>
</div>

CSS(#body 和#background 只是演示容器)

#body {
    height:500px;
    width:500px;
}
#background {
    background:#F9F9F9;
}
.company-container {
    display:inline-block;
    padding:20px;
}
.company {
    border-radius: 80px;
    display: block;
    height: 130px;
    width: 130px;
    margin: 15px auto;
    background:#E5E5E5;
}
.company:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble {
    border-radius: 30px;
    width: 40px;
    height: 40px;
    position:absolute;
    top:0;
    border: solid 1px red;
}
.company-side-bubble:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble:nth-of-type(2) {
    margin-top: 15px;
    margin-left: 44px;
}
.company-side-bubble:nth-of-type(3) {
    margin-top: 34px;
    margin-left: 91px;
}
.company-side-bubble:nth-of-type(4) {
    margin-left: 109px;
    margin-top: 81px;
}

Answer 1

您可以使用百分比而不是像素作为单位。

此外，您还需要使用 translateX 和 translateY 来补偿小图片的宽度和高度。

在这里，我已经为您完成了:http://jsfiddle.net/qatkr261/2/

.company-side-bubble:nth-of-type(2) {
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(25%);
}
.company-side-bubble:nth-of-type(3) {
  top: 25%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(4) {
  right: 0%;
  top: 50%;
  transform: translateX(-25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(5) {
  top: 75%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(6) {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-25%);
}
.company-side-bubble:nth-of-type(7) {
  bottom: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(50%);
}
.company-side-bubble:nth-of-type(8) {
  top: 50%;
  left: 0%;
  transform: translateX(25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(9) {
  top: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(-50%);
}

我还更改了其他类的一些 css 以使其工作，最重要的是:.company 不再有 top:0 并且它的边距现在是统一的(所有四个边都相等)并且已经增长，.company-container 丢失了填充(由 .company margin 补偿)并获得 position:relative

更新:

如果你想让气泡也散开，你需要为每个气泡添加额外的选择器，如下所示:

.company:hover ~ .company-side-bubble:nth-of-type(2) {
  top: -5%;
}
.company:hover ~ .company-side-bubble:nth-of-type(3) {
  top: 20%;
  right: 20%;
}
.company:hover ~ .company-side-bubble:nth-of-type(4) {
  right: -5%;
}
...