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>

来源

2014-10-17 49volro

我坐在罚款??? 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

的做法是错误的，你需要将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; 
}

而且a working fiddle here

来源

2014-10-17 09:14:28

了解。但为什么图像不在圆圈中心？ – 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%; 
}

DEMO here.

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; 
}

DEMO here.

来源

2014-10-17 08:56:16 Hiral

挤压..呃，我无法上传图片给你看 – 49volro 2014-10-17 08:59:15

你的演示不是循环播放。 – 2014-10-17 08:59:23

不错，但是我不能使用'background-image'，因为图片的URL会生成Wordpress。我可以写：'

'？ – 49volro 2014-10-17 09:19:29

-1

您需要使用jQuery来做到这一点。这种方法使您能够拥有动态图像，并且无论大小如何都可以实现动态图像。

我的演示现在有一个缺陷，我没有将图像居中放在容器中，但一分钟后又回到了它（需要完成我正在处理的脚本）。

DEMO

<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;  
}

来源

2014-10-17 09:29:28

绝对不需要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>

来源

2014-10-17 09:42:56 Tom

约翰尼的解决方案是好的。我发现添加最小宽度：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>

来源

2015-09-27 11:41:11 evanjmg

CSS圆形裁剪矩形图像

回答

相关问题