我曾使用border-radius: 50%或border-radius: 999em，但问题仍然存在：对于正方形图像没有问题，但对于矩形图像，我得到的是一个椭圆形。我也准备裁剪图像的一部分（显然）。有没有一种方法可以纯粹使用CSS（或至少JavaScript / jQuery）来实现，而不使用具有background-image的<div>，只使用<img>标签？
如何使用CSS将矩形图像呈现为圆形
64
- Jennifer Vandoni
2
3只有使用 border-radius 才能将正方形变成圆形。border-radius 不会增加或减少高度和宽度。 - G-Cyrillus
你应该提供一个 jsfiddle 的例子来说明你想要的是什么。为什么不能使用 DIV 呢？为什么不能设置 IMG 标签的背景图片呢？等等... - A. Wolff
10个回答
57
我猜测你对于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;
}
- fzzle
14
2你甚至可以将它与IMG标签一起使用。 - A. Wolff
2由于问题是关于矩形而不是正方形，因此这种方法行不通。请将 div 设为固定宽度和高度，并设置 overflow: hidden。子 div 应该填充整个 div，溢出的部分就不见了，这样就成了一个圆形。同时，应该将 img 的显示设置为块级元素，以消除可能存在的空白... - David
1OP的问题太模糊了，她需要提供当前正在使用的代码，让我们看看她在谈论什么。IMG是否具有固定大小，她不能使用容器等等...就我所读到的，@David的评论似乎是公正的。 - A. Wolff
@fzzle，一个矩形不能用border-radius变成圆形，这就是问题的所在 :) 不管那是不是一张图片。 - G-Cyrillus
3这个答案对我来说几乎起作用了。我只需要添加"background-size：cover"来缩小一个较大的图像。 - Shane Loveland
显示剩余9条评论
38
我的两分钱，因为唯一回答的评论有点疯狂。这是我通常做的。对于一个圆，你需要从一个正方形开始。这个代码强制使用正方形并拉伸图像。如果你知道图像将至少与圆形 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>
- David
9
@MrX 愚蠢？你能详细解释一下吗？ - A. Wolff
至少您应该将min-width:100%和min-height:100%设置为图像，以确保它填充容器，宽度和高度可能会改变图像的比例，使其看起来很奇怪 :) - G-Cyrillus
@GCyrillus，设置宽度和高度不是做同样的事情吗？ - David
1@David，不完全是，它会将您的图像缩小或扩展为一个正方形。 - G-Cyrillus
4min-width和min-height的问题在于，如果你有一张比150像素大（很多）的图片，那么只会显示部分图片。 - Nick
显示剩余4条评论
12
对于那些使用 Bootstrap 3 的人来说，它有一个非常好的 CSS 类来完成这项工作：
<img src="..." class="img-circle">
- Aron Lorincz
1
10将矩形图像转换为椭圆形，而不是圆形！ - user2473779
4
只有使用border-radius才能将正方形变为圆形。
border-radius不会增加或减少高度和宽度。
您的请求是仅使用图像标签，如果标签不是正方形，则基本上不可能实现。
如果要使用空白图像并设置另一个背景，则将很麻烦，每个图像都需要设置一个背景。
只有在存在包装器的情况下才可以进行裁剪。 在这种情况下，您有许多方法可供选择。
- G-Cyrillus
3
在 @fzzle 的回答基础上，为了在不定义固定高度或宽度的情况下实现从矩形到圆形的转换，可以使用以下方法。padding-top:100% 保持圆形裁剪器 div 的1:1比例。设置内联背景图像，居中，使用 background-size:cover 隐藏任何多余的部分。
CSS
.circle-cropper {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
border-radius: 50%;
width: 100%;
padding-top: 100%;
}
HTML
<div class="circle-cropper" role="img" style="background-image:url(myrectangle.jpg);"></div>
- paddyfields
3
我选择使用没有src属性的img标签作为我的HTML元素，这样我就不必担心div成为块级元素的愚蠢问题。可能会违反一些无障碍规则... - Brian Peterson
适用于响应式布局。 - baohouse
1@BrianPeterson 只是为了提醒任何阅读此内容的人，我最近发现要使其可访问，请在 div 中添加 role="img"。这将让屏幕阅读器知道将其视为图像处理。 - paddyfields
2
如果您知道高度和宽度，这个方法效果很好：
img {
object-fit: cover;
border-radius: '50%';
width: 100px;
height: 100px;
}
通过一行CSS代码实现图片居中并裁剪，详情请见
- user2634633
2
您可以这样做：
<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>
- visualfeaster
1
pls put further explanation - tod
2
以下方法对我有效：
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
<div class="round">
<img src="test.png" />
</div>
- Qasim
0
我一直在研究这个问题，除了将带有图像的div作为背景，并在其中使用img标签并将其可见性设置为none或类似方法之外，我找不到一个好的解决方案。
另外，我建议您向div添加background-size: cover，以便通过裁剪多余部分来填充背景图像。
- Krynble
-2
<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>
- surya
2
3你能否在回答正文中进一步解释一下？ - Russia Must Remove Putin
请在头部添加以下内容（<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>） - surya
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接