圆上的CSS项目使中心图像变大

Question

如何使中心图像比外部图像大1.25倍？这是一个codepen。可以找到代码的解释器here，我已将其简化了。

我尝试过调整圆圈大小，但它影响了所有这些。

as.Date(as.yearqtr(x, format = "Q%q /%yyyy"))    

Answer 1

您可以使用.circle-container li:last-child img定位它，然后应用transform: scale(1.25)。

＆＃13;

＆＃13;

.circle-container {
  position: relative;
  /* 1 */
  width: 20em;
  height: 20em;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  /* 2 */
  box-sizing: content-box;
  /* 3 */
  margin: 5em auto 0;
  border: solid 1px tomato;
}
.circle-container > * {
  /* 4 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: 6em;
  margin: -3em;
}
.circle-container > :nth-of-type(1) {
  transform: rotate(30deg) translate(10em) rotate(-30deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(150deg) translate(10em) rotate(-150deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(210deg) translate(10em) rotate(-210deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(330deg) translate(10em) rotate(-330deg);
}

.circle-container img {
  display: block;
  width: 100%;
  border-radius: 50%;
}

.circle-container li:last-child img {
  transform: scale(1.25);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;