円形画像ギャラリーを作成する方法

Question

画像に示すように円でクライアントのロゴを配置する必要がありますが、私は試しましたが、 は完全な円を得られません。

Answer 1

このような何か？

var x = Math.cos(point) * size; 
var y = Math.sin(point) * size; 

し、それは私が下記行ったように値でループ、または単に手動円でポイントを計算し、ハードコーディングのいずれかの問題だ：あなたが使用することができ、円上の点を計算すること

それらインチ

function getCircle(offset, size, point, circlesize) { 
 
    var x = Math.cos(point) * size; 
 
    var y = Math.sin(point) * size; 
 
    var $div = $('<div class="picturediv"></div>'); 
 
    var $wrap = $('<div class="wrap"></div>'); 
 
    $wrap.css({ 
 
    top: offset + 'px', 
 
    left: offset + 'px' 
 
    }); 
 
    
 
    
 
    $div.css({ 
 
    top: (size+x) + 'px', 
 
    left: (size+y) + 'px', 
 
    width: circlesize + 'px', 
 
    height: circlesize + 'px' 
 
    }); 
 
    $wrap.append($div); 
 
    $('#wrap').append($wrap) 
 
} 
 

 
for(var c=0;c<6;c++) { 
 
    getCircle(200, 100,c * 45,50); 
 
} 
 
for(var c=0;c<=10;c++) { 
 
    getCircle(100, 200,c * 25.7, 75); 
 
}

.picturediv { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color:black; 
 
    border: 1px solid red; 
 
    border-radius:50%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-image: url(https://i.imgur.com/AilIzSF.jpg); 
 
    background-position: -219px -193px;; 
 
    background-repeat: no-repeat; 
 
    
 
} 
 
.wrap { 
 
    position: relative; 
 
    left: 0px; 
 
    left: 0px; 
 
} 
 
#wrap { 
 
    width:100%; 
 
    height: 100%; 
 
    background-color: gray; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div class="wrap"> 
 
    <div class="picturediv" style="width:120px;height:120px;left:265px;top:265px;"></div> 
 
    </div> 
 
</div>