矩形图像的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>

原文由 49volro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该方法是错误的，您需要将 border-radius 应用于容器 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>

原文由 Johnny Kutnowski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

object-fit 属性提供了一种非 hackish 的方式来执行此操作（以图像为中心）。除了 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">

原文由 Dispenser 发布，翻译遵循 CC BY-SA 4.0 许可协议