我曾使用border-radius: 50%
或border-radius: 999em
,但问题仍然存在:对于正方形图像没有问题,但对于矩形图像,我得到的是一个椭圆形。我也准备裁剪图像的一部分(显然)。有没有一种方法可以纯粹使用CSS(或至少JavaScript / jQuery)来实现,而不使用具有background-image
的<div>
,只使用<img>
标签?
我曾使用border-radius: 50%
或border-radius: 999em
,但问题仍然存在:对于正方形图像没有问题,但对于矩形图像,我得到的是一个椭圆形。我也准备裁剪图像的一部分(显然)。有没有一种方法可以纯粹使用CSS(或至少JavaScript / jQuery)来实现,而不使用具有background-image
的<div>
,只使用<img>
标签?
我猜测你对于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;
}
我的两分钱,因为唯一回答的评论有点疯狂。这是我通常做的。对于一个圆,你需要从一个正方形开始。这个代码强制使用正方形并拉伸图像。如果你知道图像将至少与圆形 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>
对于那些使用 Bootstrap 3 的人来说,它有一个非常好的 CSS 类来完成这项工作:
<img src="..." class="img-circle">
只有使用border-radius才能将正方形变为圆形。
border-radius不会增加或减少高度和宽度。
您的请求是仅使用图像标签,如果标签不是正方形,则基本上不可能实现。
如果要使用空白图像并设置另一个背景,则将很麻烦,每个图像都需要设置一个背景。
只有在存在包装器的情况下才可以进行裁剪。 在这种情况下,您有许多方法可供选择。
在 @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>
如果您知道高度和宽度,这个方法效果很好:
img {
object-fit: cover;
border-radius: '50%';
width: 100px;
height: 100px;
}
通过一行CSS代码实现图片居中并裁剪,详情请见
<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>
.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>
我一直在研究这个问题,除了将带有图像的div作为背景,并在其中使用img标签并将其可见性设置为none或类似方法之外,我找不到一个好的解决方案。
另外,我建议您向div添加background-size: cover
,以便通过裁剪多余部分来填充背景图像。
<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>