矩形图像的CSS圆形裁剪

Question

我想从矩形照片中制作一个居中的圆形图像。照片的尺寸未知。通常是矩形。我尝试了很多方法：

密码

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}

<div class="image-cropper">
   <img src="https://sf1.autojournal.fr/wp-content/uploads/autojournal/2012/07/4503003e3c38bc818d635f5a52330d.jpg" class="rounded" />
</div>

Answer 1

如果你没有

css prettyprint-override">.cropcircle{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: #eee no-repeat center;
    background-size: cover;
}

#image1{
    background-image: url(http://www.voont.com/files/images/edit/7-ridiculous-ways-boost-self-esteem/happy.jpg);
}

<div id="image1" class="cropcircle"></div>

Answer 2

“对象拟合”（object fit）属性提供了一种非黑客方式（以图像为中心）。几年来，除了Internet Explorer之外，它已经在主要浏览器中得到支持（Chrome/Safari自2013年起，Firefox自2015年起，Edge自2015年起）。

img.rounded {
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

<img src="https://picsum.photos/200/300" class="rounded">

Answer 3

方法错误，您需要将边界半径应用于容器div，而不是实际图像。

这将起作用：

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>