CSS矩形图像的圆形裁剪

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

CSS：

.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%;  
}

HTML：

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

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

该object-fit属性提供了一种非骇客的方法（以图片为中心）。除了Internet Explorer，它已经在主要浏览器中受支持了几年（2013年以来为Chrome / Safari，自2015年以来为Firefox，自2015年以来为Edge）。

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

<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded">

如果您可以不用<img>标签住，建议您将照片用作背景图像。

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

尝试这个：

img {
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

演示在这里。

要么：

.rounded {
    height: 100px;
    width: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:url("http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg") center no-repeat;
    background-size:cover;
}

演示在这里。

约翰尼的解决方案很好。我发现添加min-width：100％确实可以帮助图像填充整个圆圈。您可以结合使用JavaScript来达到最佳效果，或者如果真的很想解决问题，请使用ImageMagick- http://www.imagemagick.org/script/index.php。

.image-cropper {

  width: 35px;

  height: 35px;

  position: relative;

  overflow: hidden;

  border-radius: 50%;

}

.image-cropper__image {

  display: inline;

  margin: 0 auto;

  height: 100%;

  min-width: 100%;

}

<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>

我知道上面提到的许多解决方案都可行，您也可以尝试使用flex。

但是我的图像是矩形的，无法正确拟合。所以这就是我所做的。

.parentDivClass {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50%;
    margin: 20px;
    display: flex;
    justify-content: center;
}

对于里面的图像，您可以使用

child Img {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

当您使用bootstrap 4类时，这将很有帮助。

我能够做到这一点的最好方法是使用新的CSS object-fit（1）属性和padding-bottom（2）hack。

您需要在图像周围使用包装元素。您可以使用任何想要的东西，但是我喜欢使用新的HTMLpicture标记。

.rounded {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* These classes just used for demo */
.w25 {
  width: 25%;
}

.w50 {
  width: 50%;
}

<div class="w25">
<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>
</div>

<!-- example using a div -->
<div class="w50">
<div class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</div>
</div>

<picture class="rounded">
  <img src="https://i.imgur.com/A8eQsll.jpg">
</picture>

参考文献

1. CSS图像大小，如何填充，不拉伸？

2. 使用CSS保持div的长宽比

插入图像，然后反手需要做的就是：

<style>
img {
  border-radius: 50%;
}
</style>

**图像代码将自动出现在这里**

您需要使用jQuery来做到这一点。这种方法使您能够拥有动态图像，并且无论大小如何都可以进行动态处理。

我的演示现在有一个缺陷，我没有将图像居中放置在容器中，而是在一分钟之内无法恢复（需要完成我正在处理的脚本）。

演示

<div class="container">
    <img src="" class="image" alt="lambo" />
</div>

//script
var container = $('.container'),
    image = container.find('img');

container.width(image.height());


//css    
.container {
    height: auto;
    overflow: hidden;
    border-radius: 50%;    
}

.image {
    height: 100%;    
    display: block;    
}