CSS圆形裁剪矩形图像
我想从矩形图像制作居中的圆形图像。 照片的尺寸未知。通常它是一个矩形形式。 我已经尝试了很多方法: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:
<div class="image-cropper">
<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>
的做法是错误的,你需要将border-radius
施用于容器div
,而不是实际的图像。
这会工作:
HTML
<div class="image-cropper">
<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>
CSS
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
img {
display: inline;
margin: 0 auto;
height: 100%;
width: auto;
}
了解。但为什么图像不在圆圈中心? – 49volro 2014-10-17 09:38:30
是的。我认为Hiral的解决方案更适合您的需求,并且背景图像可以轻松地由WordPress动态提供。出于某种原因,我无法通过text-align:center解决我的解决方案。所以我暂时不能真正帮你解决这个问题:( – 2014-10-17 09:52:10
这个解决方案不适用于水平方向的图像 – 2016-02-03 09:50:34
试试这个:
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;
}
您需要使用jQuery来做到这一点。这种方法使您能够拥有动态图像,并且无论大小如何都可以实现动态图像。
我的演示现在有一个缺陷,我没有将图像居中放在容器中,但一分钟后又回到了它(需要完成我正在处理的脚本)。
<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;
}
绝对不需要jQuery请参阅已接受的答案或@ Tom的 – abettermap 2017-02-19 03:05:25
@abettermap如果您阅读的问题是“通常它是矩形窗体”,那么这些解决方案没有动态高度。图像高度与JavaScript。Seo值丢失与汤姆斯解决方案。因此,阅读并认为最好的pracitce也downvoting之前 – 2017-02-20 11:14:44
使用'背景图像'的答案有动态高度的意义上,图像将填补圆形空间,无论什么高度是,我认为这是OP的目标。 回复:最佳实践,我认为有些人可能会争论不使用JS进行造型将是最佳做法。然而,你有一点与SEO,所以我会编辑你的回应。随意编辑更多。 – abettermap 2017-02-26 18:32:39
如果你能生活在没有<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>
约翰尼的解决方案是好的。我发现添加最小宽度: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>
我坐在罚款??? http://jsfiddle.net/7c9wjLy6/3/ – 2014-10-17 08:54:04
是否有一个原因你有保证金指定两次不同的值? – gleenn 2016-08-29 20:41:32
可能想通过删除“通常”来纠正问题,如果是这样,那么没有一个CSS解决方案不会削减它。 – 2017-11-28 11:04:19