Arrange images in a circle

Question

I have six images that I want to arrange in a circle using HTML and CSS. The circle should not rotate or anything like that - anybody have any ideas on how to do this?

Answer 1

I don't have a pure CSS solution for you, but this may help you. A solution with jQuery. This will help you even if you have more than 6 images.

Here is a live demo.

Answer 2

You could use relative positioning to achieve this:

​<div id='box1'>&nbsp;</div>
<div id='box2'>&nbsp;</div>
<div id='box3'>&nbsp;</div>
<div id='box4'>&nbsp;</div>
<div id='box5'>&nbsp;</div>
<div id='box6'>&nbsp;</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
div{
    position:absolute;
    width:20px;
    height:20px;
}
#box1
{
   border:1px solid red;
   right:50%;
}   
#box2
{
    border:1px solid purple;
    top:30%;
    right:10%;
}
#box3
{
    border:1px solid orange;
    top:30%;
    left:10%;
}
#box4
{
    border:1px solid red;
    top:60%;
    right:10%;
}
#box5
{
    border: 1px solid green;
    top:60%;
    left:10%
}
#box6
{
    border:1px solid red;
    top:90%;
    right:50%;
}​

Js Fiddle here: http://jsfiddle.net/E4j2R/

Answer 3

Check this out: https://hugogiraudel.com/2013/04/02/items-on-circle/?fbclid=IwAR04rSahTdicEnKABuoojF6ZYBA2ovU6OQWJMCvt5I01sjCKz5QuHvMqG58

Here's the pen: https://codepen.io/HugoGiraudel/pen/Bigqr Mixin to put items on a circle

• Allows children to be absolutely positioned
• Allows the mixin to be used on a list
• In case box-sizing: border-box has been enabled

• Allows any type of direct children to be targeted

  <ul class='circle-container'>
    <li><img src='http://lorempixel.com/100/100/city'></li>
    <li><img src='http://lorempixel.com/100/100/nature'></li>
    <li><img src='http://lorempixel.com/100/100/abstract'></li>
    <li><img src='http://lorempixel.com/100/100/abstract'></li>
    <li><img src='http://lorempixel.com/100/100/cats'></li>
    <li><img src='http://lorempixel.com/100/100/food'></li>
    <li><img src='http://lorempixel.com/100/100/animals'></li>
    <li><img src='http://lorempixel.com/100/100/business'></li>
    <li><img src='http://lorempixel.com/100/100/people'></li>
  </ul>
  
  /// @param {Integer} $nb-items - Number or items
  /// @param {Length} $circle-size - Container size
  /// @param {Length} $item-size - Item size
  /// @param {String | false} $class-for-IE - Base class name for old IE
  
  @mixin distribute-on-circle( 
    $nb-items,
    $circle-size,
    $item-size,
    $class-for-IE: false
  ) {
    $half-item: ($item-size / 2);
    $half-parent: ($circle-size / 2);
  
    position: relative; /* 1 */
    width:  $circle-size;
    height: $circle-size;
    padding: 0;
    border-radius: 50%; 
    list-style: none; /* 2 */ 
    box-sizing: content-box; /* 3 */ 
  
    > * { /* 4 */
      display: block;
      position: absolute;
      top:  50%; 
      left: 50%;
      width:  $item-size;
      height: $item-size;
      margin: -$half-item;
    }
  
    $angle: (360 / $nb-items);
    $rot: 0;
  
    @for $i from 1 through $nb-items {
      @if not $class-for-IE {
        > :nth-of-type(#{$i}) {
          transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
        }
      } @else {
        > .#{$class-for-IE}#{$i} {
          // If CSS transforms are not supported
          $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
          $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
          margin: $mt 0 0 $ml;
        }
      }
  
      $rot: ($rot + $angle);
    }
  }
  
  .circle-container {
    @include distribute-on-circle(8, 20em, 6em, false); 
    margin: 5em auto 0;
    border: solid 5px tomato;
  }
  
  .circle-container img { 
    display: block; 
    width: 100%; 
    border-radius: 50%;
    filter: grayscale(100%);
  
    &:hover {
      filter: grayscale(0);
    }
  }
  

It allows you to customize the amount of items .. also supports IE :) Pretty cool solution

Answer 4

Here jQuery free fork of @blasteralfred Ψ solution

function arrangeImagesInCircle(props = {}) {
  const getWidthHeight = element => {
    const { width, height } = element.getBoundingClientRect();
    return [width, height];
  }
  const radius = props.radius || 200;
  const imageSelector = props.imageSelector || 'img';
  const container = props.container;
  const [containerWidth, containerHeight] = getWidthHeight(container);

  return imageSelector => {
    const fields = container.querySelectorAll(imageSelector);
    const step = (2 * Math.PI) / fields.length;
    var angle = 0
    fields.forEach(field => {
      const [fieldWidth, fieldHeight] = getWidthHeight(field);
      const x = Math.round(containerWidth / 2 + radius * Math.cos(angle) - fieldWidth / 2);
      const y = Math.round(containerHeight / 2 + radius * Math.sin(angle) - fieldHeight / 2);
      if (window.console) console.log(x, y);
      field.style.left = x + 'px';
      field.style.top = y + 'px';
      angle += step;
    });
  }
}