定位小图像在圆形阵列周围的大图像

Question

我试图找到一种干净的方式，以循环的方式在大图像周围浮动多个图像气泡。

每张图片可能不会超过六个泡泡，但我想要找到一种递归且响应的方式来定位这些泡泡任意大小的父图像。这些父图像将具有相同的高度/宽度并且不低于100px。 （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，使其工作，最重要的是：。公司没有顶：0了，它是保证金现在是统一的（四边相等）和已经长大，。公司集装箱丢失填充（通过。公司保证金补偿），并获得位置：相对

UPDATE：

如果您想要气泡传播，你将需要为每一个额外的选择器如下：

.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%; 
} 
...