Question

我有一张图像，其属性定义如下：

.icon {
   background-color: white;
   border-radius: 50%;
   width: 50px;
   height: 50px;
}

由于border-radius，图像在一个圆圈中。有没有一种方法可以将这个圆圈缩小一定数量的像素，以使该圆圈的某些“外层”被剃掉，而无需将其按比例缩小？

Answer 1

结合使用background-size和background-position属性，可以相对于背景元素将图像调整为背景大小。抱歉，如果这是您的初衷，那就是您的初衷：

.icon {
   background-color: white;
   border-radius: 50%;
   width: 50px;
   height: 50px;
}

<img src="https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" class="icon" />

相反，如果将图像用作背景图像，则可以控制相对于元素的大小：

.icon {
   background-color: white;
   background-image: url('https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg');
   background-position: center center; /* two values for horizontal and vertical positioning, you can use px or other units to configure distance too. */
   background-size: 180% 180%;  /* also two values for height and width, here I am using greater than 100% to make the image larger than the element, achiving the effect you are looking for */
   border-radius: 50%;
   width: 50px;
   height: 50px;
}

<div class="icon" role="img" aria-label="this puppy looks a little closer, right?"></div>

Answer 2

我可以想到几种不同的方法来完成此操作，这取决于您需要做到的“清洁”程度。在线阅读评论，以了解发生的情况。

/* Your code, as is: */
img {
   background-color: white;
   border-radius: 50%;
   width: 150px;
   height: 150px;
}

/* Using clip-path (not supported in IE/Edge): */
img.clipped {
  clip-path: circle(28.6% at 50% 50%);
}

/* Using a background image: */
span.image {
  width: 150px;
  height: 150px;
  display: inline-block;
  background: url(https://via.placeholder.com/150);
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 25px #fff;
}

/* Using a span as a 'wrapper': */
span.image_wrapper {
  width: 150px;
  height: 150px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 25px #fff;
}

<!-- Your code, as is: -->
<img src="https://via.placeholder.com/150" />

<!-- Using clip-path (not supported in IE/Edge) -->
<img src="https://via.placeholder.com/150" class="clipped" />

<!-- Using a background image: -->
<span class="image"></span>

<!-- Using a span as a 'wrapper' -->
<span class="image_wrapper">
  <img src="https://via.placeholder.com/150" class="clipped" />
</span>

有关剪切路径，请参见：https://caniuse.com/#search=css%20clip

有没有办法减小图像的半径？

2 个答案: