我正在用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://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.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