Html 如何使用 CSS 使矩形图像显示为圆形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22577371/
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
How to make rectangular image appear circular with CSS
提问by Jennifer Vandoni
I've used border-radius: 50%or border-radius: 999em, but the problem is the same: with squared images there's no problem, but with rectangular images I obtain an oval circle. I'm also disposed to crop a part of the image (obviously). Is there's a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div>with a background-image, but only using the <img>tag?
我用过border-radius: 50%or border-radius: 999em，但问题是一样的：方形图像没有问题，但是矩形图像我得到一个椭圆形的圆圈。我也准备裁剪图像的一部分（显然）。有没有一种方法可以使用纯 CSS（或至少是 JavaScript/jQuery）来做到这一点，而不使用<div>with a background-image，而只使用<img>标签？
回答by fzzle
I presume that your problem with background-imageis that it would be inefficientwith a source for each image inside a stylesheet. My suggestion is to set the source inline:
我认为您的问题background-image是样式表中每个图像的源效率低下。我的建议是设置源内联：
<div style = 'background-image: url(image.gif)'></div>
div {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
回答by David
My 2cents because the comments for the only answer are getting kinda crazy. This is what I normally do. For a circle, you need to start with a square. This code forces a square and will stretch the image. If you know that the image is going to be at least the width and height of the round div you can remove the imgstyle rules for it to not be stretch but only cut off.
我的 2cents 因为对唯一答案的评论有点疯狂。这是我通常的做法。对于圆形，您需要从正方形开始。此代码强制一个正方形并将拉伸图像。如果您知道图像将至少是圆形 div 的宽度和高度，您可以删除img样式规则，使其不被拉伸而只被切断。
<html>
<head>
<style>
.round {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round img {
display: block;
/* Stretch
height: 100%;
width: 100%; */
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div class="round">
<img src="image.jpg" />
</div>
</body>
</html>
回答by Aron Lorincz
For those who use Bootstrap 3, it has a great CSS class to do the job:
对于那些使用 Bootstrap 3 的人来说，它有一个很棒的 CSS 类来完成这项工作：
<img src="..." class="img-circle">
回答by paddyfields
Building on the answer from @fzzle - to achieve a circle from a rectangle without defining a fixed height or width, the following will work. The padding-top:100% keeps a 1:1 ratio for the circle-cropper div. Set an inline background image, center it, and use background-size:cover to hide any excess.
以@fzzle 的答案为基础 - 要在不定义固定 height 或 width 的情况下从矩形实现圆形，以下将起作用。padding-top:100% 为圆形裁剪器 div 保持 1:1 的比例。设置内嵌背景图像，将其居中，然后使用 background-size:cover 隐藏任何多余的图像。
CSS
CSS
.circle-cropper {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
border-radius: 50%;
width: 100%;
padding-top: 100%;
}
HTML
HTML
<div class="circle-cropper" role="img" style="background-image:url(myrectangle.jpg);"></div>
回答by G-Cyrillus
you can only make circle from square using border-radius.
您只能使用边框半径从正方形制作圆形。
border-radius doesn't increase or reduce heights nor widths.
border-radius 不会增加或减少高度或宽度。
Your request is to use only image tag , it is basicly not possible if tag is not a square.
您的要求是仅使用 image tag ，如果 tag 不是正方形，则基本上是不可能的。
If you want to use a blank image and set another in bg, it is going to be painfull , one background for each image to set.
如果您想使用一个空白图像并在 bg 中设置另一个图像，这将是痛苦的，每个图像要设置一个背景。
Cropping can only be done if a wrapper is there to do so. inthat case , you have many ways to do it
只有在有包装器的情况下才能进行裁剪。在那种情况下，你有很多方法可以做到
回答by user2634633
This one works well if you know height and width:
如果您知道高度和宽度，这个效果很好：
img {
object-fit: cover;
border-radius: '50%';
width: 100px;
height: 100px;
}
via https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
通过https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
回答by visualfeaster
You can make it like that:
你可以这样做：
<html>
<head>
<style>
.round {
display:block;
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
padding:5px 4px;
}
.round img {
width: 45px;
}
</style>
</head>
<body>
<div class="round">
<img src="image.jpg" />
</div>
</body>
回答by Qasim
Following worked for me:
以下为我工作：
CSS
CSS
.round {
border-radius: 50%;
overflow: hidden;
width: 30px;
height: 30px;
background: no-repeat 50%;
object-fit: cover;
}
.round img {
display: block;
height: 100%;
width: 100%;
}
HTML
HTML
<div class="round">
<img src="test.png" />
</div>
回答by Krynble
I've been researching this very same problem and couldn't find a decent solution other than having the div with the image as background and the img tag inside of it with visibility none or something like this.
我一直在研究这个非常相同的问题，除了将图像作为背景的 div 和其中的 img 标签与可见性无或类似的东西之外，找不到合适的解决方案。
One thing I might add is that you should add a background-size: coverto the div, so that your image fills the background by clipping it's excess.
我可能要补充的一件事是，您应该background-size: cover向 div添加一个，以便您的图像通过剪裁多余的图像来填充背景。
回答by surya
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.round_img {
border-radius: 50%;
max-width: 150px;
border: 1px solid #ccc;
}
</style>
<script>
var cw = $('.round_img').width();
$('.round_img').css({
'height': cw + 'px'
});
</script>
</head>
<body>
<img class="round_img" src="image.jpg" alt="" title="" />
</body>
</html>
