Question

我试图将图像放在圆圈内，如下所示，但它似乎缩小了。我应该对代码做出哪些改变？

<!doctype html>
<html>
  <head>
    <style>
      #circle {
        background: skin-tone.jpg;
        background-size: cover;
        border-radius:50% 50% 50% 50%;
        width:400px;
        height:400px;
      }
    </style>
  </head>
  <body>
    <img src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" id="circle">
  </body>
</html>

Answer 1

您可以将图像用作背景：

＆＃13;

#circle {
  background-size: cover;
  background-position:center;
  border-radius: 50% 50% 50% 50%;
  width: 400px;
  height: 400px;
}

＆＃13;

<div style="background-image:url(http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg)" id="circle"></div>

＆＃13;

Answer 2

原因是您的图像不完全是形状的大小（400px * 400px）。

如果您的图片永远不会正确，那么我会执行以下操作：

＆＃13;

.circle {
  position: relative;
  border-radius: 100%;
  width:400px;
  height:400px;
  overflow: hidden;
}

.circle__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
}

＆＃13;

<!doctype html>
<html>
  <body>
    <div class="circle">
      <img class="circle__image" src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" title="skin tone">
    </div>
  </body>
</html>

＆＃13;

就个人而言，我会尝试使图像与父剪贴蒙版的大小相同。然而，生活并非如此。此代码将自动填充容器。基于高度，而不是宽度。

translate3d将永远是图像中心。

如何在CSS圈内显示完整尺寸的图像？

2 个答案: