任何尺寸的CSS圆形图像
我正在用CSS创建一个圆形图像。任何尺寸的CSS圆形图像
当我的形象是200像素x 300像素，它不是一个完美的圆：
.circular {
margin: auto;
width: 200px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://i.stack.imgur.com/S1ZCs.jpg) no-repeat;
}<div class="circular"></div>这里是一个jsFiddle为好。
当宽度和高度是不同的尺寸时，有没有办法让一个完美的圆？如果我将它设置为300 x 300，这是一个完美的圆形，但当图像为200 x 300时，我需要它处于完美的圆形。
如果数值不是平方的，那么它就不能成为一个圆，这很简单。但是，如果将图像嵌入其中，则可以使包装正方形并隐藏圆形的剩余部分。这将是这样的：
.circular {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.circular img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="circular">
<img src="http://www.placehold.it/150" />
</div>我通常包装所有的行之间，并且包括与:nth-child(n)选择一个单独的CSS定义position:和transform:使支持中心仅适用于浏览器小孩，但这只是微调。
+1 - 原谅编辑。这是一个很好的方法，Stack Snippet可以很容易地看到。 – misterManSam 2014-11-05 14:44:54
@misterManSam这很好（起初我不知道是什么改变了）。我会编辑它添加一些前缀，因为这不工作，我使用safari（如果它不适用于我，那么它有点尴尬：p） – somethinghere 2014-11-05 14:46:26
据我所知，要使用边框实现一个圆-radius属性，你的宽度和高度值必须是一样的。
这并不能提供问题的答案。要批评或要求作者澄清，在他们的帖子下留下评论 - 你总是可以评论你自己的帖子，一旦你有足够的[声誉]（http://*.com/help/whats-reputation），你会能够[评论任何帖子]（http://*.com/help/privileges/comment）。 – Taifun 2014-11-05 14:48:19
了解并致歉 – hyperjelly 2014-11-06 10:27:21
有一种方法，与transform: scale，摔成形。我不知道你为什么需要它......这是无论如何。比例值显然需要随着宽度/高度而改变。
另一个问题是背景图像会使用这种方法失真。
div {
width: 200px;
height: 300px;
background: #F00;
border-radius: 50%;
transform: scale(.76, .5)
}<div><div>是的，这只是过于复杂，不能明白为什么你会使用这个要么你现在必须计算两件事情！ – somethinghere 2014-11-05 14:35:01
+1这里问题的好方法是您需要知道比例以设置变换值。 – DaniP 2014-11-05 14:36:13
@Danko是的，接受的解决方案相当简单。我没有在......圈子外面思考。 – misterManSam 2014-11-05 15:09:02
可以使用border-radius:100%。这可以用来创建圆形或椭圆形状。也可以随时使用border-radius直接与元素宽度相关
我们可以通过稍微改变HTML结构来实现它。
<div class="circular">
<img src="img/desktop.jpg">
</div>
.circular { /* need to give parent container equal width and height*/
margin: auto;
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
overflow:hidden;
}
.circular img{
width:100%;
}
它的作品，但缺乏很多边缘情况。 – somethinghere 2014-11-05 14:47:51
不要紧，形象是什么尺寸在你的例子，因为它是一个背景图片。不适合的部分将不会呈现。如果您需要300x300像素的圆圈，则请将高度和宽度保持为300. 您可以使用background-size:cover;使图像拉伸以适合宽高比，但保留长宽比。
.circular {
margin: auto;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVLN-vcVHCOOLWmvihkfex1OFW0ZLVhQ7JQfcc4EH4YoJLTn68x8EpDls) no-repeat;
background-size: cover;
}<div class="circular"></div>
<br/><br/>
<div>Original image: <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVLN-vcVHCOOLWmvihkfex1OFW0ZLVhQ7JQfcc4EH4YoJLTn68x8EpDls" /></div>
你可以简单地通过使高度和宽度值相同的定义和边界半径为50％，实现这一目标。这里是代码..
.circular {
margin: auto;
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/02/desktop.jpg) no-repeat center center;
}
你可以用伪元素，让
.circular {
margin: auto;
width: 200px;
height: 300px;
overflow: hidden;
background: red;
}
.circular:before {
content: url('http://cdn.bavotasan.com/wp-content/uploads/2011/02/desktop.jpg');
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
width: 200px;
height: 200px;
overflow: hidden;
display: block;
}<div class="circular"></div>
我不知道为什么你需要不同尺寸的主意，如果你需要一个圆形？ – DaniP 2014-11-05 14:31:28
最好的你可以实现的是这样的：http://jsfiddle.net/sy48k3y5/3/ – DaniP 2014-11-05 14:32:18
有没有调整宽度或高度在jsfiddle作出一个圆 – user979331 2014-11-05 14:32:17