html - 将图标定位到圆圈中

Question

如何定位多个 <img>元素围成一个圆圈，并且这些元素也都是可点击的链接吗？我希望它看起来像下面的图片，但我不知道如何实现这种效果。



这甚至可能吗？

Answer 1

2020年解决方案
这是我这些天使用的更现代的解决方案。
我首先从一组图像生成 HTML。是否使用 PHP、JS、一些 HTML 预处理器生成 HTML 等等……这无关紧要，因为背后的基本思想是相同的。
这是执行此操作的 Pug 代码:

//- start with an array of images, described by url and alt text
- let imgs = [
-   {
-       src: 'image_url.jpg', 
-       alt: 'image alt text'
-   } /* and so on, add more images here */
- ];
- let n_imgs = imgs.length;
- let has_mid = 1; /* 0 if there's no item in the middle, 1 otherwise */
- let m = n_imgs - has_mid; /* how many are ON the circle */
- let tan = Math.tan(Math.PI/m); /* tangent of half the base angle */

.container(style=`--m: ${m}; --tan: ${+tan.toFixed(2)}`)
    - for(let i = 0; i < n_imgs; i++)
        a(href='#' style=i - has_mid >= 0 ? `--i: ${i}` : null)
          img(src=imgs[i].src alt=imgs[i].alt)

生成的 HTML 如下所示(是的，您也可以手动编写 HTML，但之后进行更改会很痛苦):

<div class="container" style="--m: 8; --tan: 0.41">
  <a href='#'>
    <img src="image_mid.jpg" alt="alt text"/>
  </a>
  <a style="--i: 1">
    <img src="first_img_on_circle.jpg" alt="alt text"/>
  </a>
  <!-- the rest of those placed on the circle -->
</div>

在 CSS 中，我们决定图像的大小，比如说 8em . --m元素位于一个圆圈上，如果它们位于 --m 多边形的边缘的中间边缘，所有这些都与圆相切。
如果你很难想象，你可以玩这个 interactive demo它为您通过拖动 slider 选择边数的各种多边形构造内圆和外接圆。

这告诉我们容器的大小必须是圆半径的两倍加上图像大小的一半。
我们还不知道半径，但如果我们知道边的数量(因此是底 Angular 一半的切线，预先计算并设置为自定义属性 --tan)和多边形边的数量，我们可以计算它。我们可能希望多边形边缘的大小至少与图像的大小一样，但我们在边上留下多少是任意的。假设我们每边都有一半的图像大小，所以多边形边缘是图像大小的两倍。这为我们提供了以下 CSS:

.container {
  --d: 6.5em; /* image size */
  --rel: 1; /* how much extra space we want between images, 1 = one image size */
  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
  --s: calc(2*var(--r) + var(--d)); /* container size */
  position: relative;
  width: var(--s); height: var(--s);
  background: silver /* to show images perfectly fit in container */
}

.container a {
  position: absolute;
  top: 50%; left: 50%;
  margin: calc(-.5*var(--d));
  width: var(--d); height: var(--d);
  --az: calc(var(--i)*1turn/var(--m));
  transform: 
    rotate(var(--az)) 
    translate(var(--r))
    rotate(calc(-1*var(--az)))
}

img { max-width: 100% }

有关转换链如何工作的说明，请参阅旧解决方案。
这样，从图像数组中添加或删除图像会自动将新数量的图像排列在一个圆圈上，使它们等距分布，并调整容器的大小。您可以在 this demo 中进行测试.

旧解决方案(出于历史原因保留)
是的，仅使用 CSS 就很有可能而且非常简单。您只需要清楚地记住您希望与图像链接的 Angular (我在最后添加了一段代码，只是为了在您悬停其中一个时显示 Angular )。
你首先需要一个包装器。我将其直径设置为 24em ( width: 24em; height: 24em; 这样做)，您可以将其设置为您想要的任何内容。你给它 position: relative; .
然后，您将链接与图像放在该包装器的中心，水平和垂直。你可以通过设置 position: absolute;然后 top: 50%; left: 50%;和 margin: -2em; (其中 2em 是图像链接宽度的一半，我设置为 4em - 同样，您可以将其更改为您想要的任何内容，但在这种情况下不要忘记更改边距)。
然后，您决定要与图像链接的 Angular ，并添加一个类 deg{desired_angle} (例如 deg0 或 deg45 或其他)。然后为每个这样的类应用链式 CSS 转换，如下所示:

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

在哪里替换 {desired_angle}与 0 , 45 ， 等等...
第一个旋转变换旋转对象及其轴，平移变换沿旋转的 X 轴平移对象，第二个旋转变换将对象带回原位。
这种方法的优点是灵活。您可以在不改变当前结构的情况下以不同的 Angular 添加新图像。
代码片段

    .circle-container {
        position: relative;
        width: 24em;
        height: 24em;
        padding: 2.8em;
        /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
        border: dashed 1px;
        border-radius: 50%;
        margin: 1.75em auto 0;
    }
    .circle-container a {
        display: block;
        position: absolute;
        top: 50%; left: 50%;
        width: 4em; height: 4em;
        margin: -2em;
    }
    .circle-container img { display: block; width: 100%; }
    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }

    <div class='circle-container'>
        <a href='#' class='center'><img src='image.jpg'></a>
        <a href='#' class='deg0'><img src='image.jpg'></a>
        <a href='#' class='deg45'><img src='image.jpg'></a>
        <a href='#' class='deg135'><img src='image.jpg'></a>
        <a href='#' class='deg180'><img src='image.jpg'></a>
        <a href='#' class='deg225'><img src='image.jpg'></a>
        <a href='#' class='deg315'><img src='image.jpg'></a>
    </div>

此外，您可以通过使用链接的背景图像而不是使用 img 来进一步简化 HTML。标签。

编辑 : example with fallback for IE8 and older (在 IE8 和 IE7 中测试)