CSS矩形裁剪矩形图像

I want to make a centered circular image from rectangle photo. The photo's dimensions is unknown. Usually it's a rectangle form. I've tried a lot of methods:

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

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:

HTML：

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

7 个解决方案

#1

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

方法是错误的，您需要将border-radius应用于容器div而不是实际图像。

This would work:

这可行：

.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="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

#2

If you can live without the <img> tag, I suggest you use the photo as a background image.

如果你没有标签，我建议你使用这张照片作为背景图片。

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

#3

Try this:

尝试这个：

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

DEMO here.

DEMO在这里。

OR:

要么：

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

DEMO here.

DEMO在这里。

#4

The object-fit property provides a non-hackish way for doing this (with image centered). It has been supported in major browsers for a few years now (Chrome/Safari since 2013, Firefox since 2015, and Edge since 2015) with the exception of Internet Explorer.

对象拟合属性提供了一种非破坏性的方法（以图像为中心）。它已经在主流浏览器中支持了几年（自2013年以来的Chrome / Safari，自2015年以来的Firefox，以及2015年以来的Edge），Internet Explorer除外。

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

#5

Johnny's solution is good. I found that adding min-width:100%, really helps images fill the entire circle. You could do this with a combination of JavaScript to get optimal results or use ImageMagick - http://www.imagemagick.org/script/index.php if you're really serious about getting it right.

约翰尼的解决方案很好。我发现添加最小宽度：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>

#6

I know many of the solutions mentioned above works, you can as well try flex.

我知道上面提到的很多解决方案都有效，你也可以试试flex。

But my image was rectangular and not fitting properly. so this is what i did.

但我的图像是矩形的，不合适。所以这就是我所做的。

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

and for the image inside, you can use,

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

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

This is helpful when you are using bootstrap 4 classes.

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

#7

You need to use jQuery to do this. This approach gives you the abbility to have dynamic images and do them round no matter the size.

你需要使用jQuery来做到这一点。这种方法使您无法获得动态图像，无论大小如何都可以进行。

My demo has one flaw right now I don't center the image in the container, but ill return to it in a minute (need to finish a script I'm working on).

我的演示现在有一个缺陷我没有将图像置于容器中心，但是在一分钟之内就会返回它（需要完成我正在处理的脚本）。

DEMO

DEMO

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