1
如何使中心图像比外部图像大1.25倍？这是一个codepen。代码的解释器可以找到here，我已经简化了它。圆形上的CSS项目使中心图像更大
我试过调整圆的大小，但它会影响到所有人。
<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/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>
</ul>
/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
///
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
@mixin distribute-on-circle($nb-items, $circle-size, $item-size) {
$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: 30;
@for $i from 1 through $nb-items {
> :nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
}
$rot: ($rot + $angle);
}
}
.circle-container {
@include distribute-on-circle(6, 20em, 6em);
margin: 5em auto 0;
border: solid 1px tomato;
}
.circle-container img {
display: block;
width: 100%;
border-radius: 50%;
}
