Html 矩形图像的 CSS 圆形裁剪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26421274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Circular Cropping of Rectangle Image
提问by 49volro
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>
回答by Johnny Kutnowski
The approach is wrong, you need to apply the border-radiusto the container divinstead 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>回答by Dispenser
The object-fitproperty 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.
该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">回答by Tom
If you can live without the <img>tag, I suggest you use the photo as a background image.
如果您可以不使用<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>回答by Hiral
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%;
}
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;
}
回答by evanjmg
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.phpif you're really serious about getting it right.
约翰尼的解决方案很好。我发现添加 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>回答by Akshay L
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.
这在您使用引导程序 4 类时很有帮助。
回答by Megan Rawls
insert the image and then backhand all you need is:
插入图像，然后反手，您只需要：
<style>
img {
border-radius: 50%;
}
</style>
** the image code will be here automatically**
** 图像代码会自动出现在这里**
回答by stldoug
The best way I've been able to do this is with using the new css object-fit(1) property and the padding-bottom(2) hack.
我能够做到这一点的最好方法是使用新的 css object-fit(1) 属性和padding-bottom(2) hack。
You need a wrapper element around the image. You can use whatever you want, but I like using the new HTML picturetag.
您需要一个围绕图像的包装元素。你可以使用任何你想要的东西，但我喜欢使用新的 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>References
参考
回答by Dejan.S
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).
我的演示现在有一个缺陷，我没有将图像居中放置在容器中，但我会在一分钟内返回它（需要完成我正在处理的脚本）。
<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;
}
