如何在圓形邊框內放置正方形的HTML圖像？

我有一個方形圖像，我想把它放在一個圓形邊框內。我怎樣才能使整個圖像適合而不是削減角落？如何在圓形邊框內放置正方形的HTML圖像？

.circle { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    border-radius: 100px; 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png'); 
    background-size: contain; 
}

這是jsfiddle。

來源

2014-07-19 dee

您的圖片周圍有透明的邊框/空間。刪除它，它會適合。 – mdesdev

您需要稍微縮小圖像以使其適合圓形。要計算確切的大小，請將圓的直徑除以sqrt（2）。在這種情況下，200px/sqrt（2）大約爲141px。

因此，添加以下屬性：

background-size: 141px; 
background-repeat: no-repeat; 
background-position: 50%;

JSFiddle

注意，藍色塊不接觸圓，因爲圖像具有透明邊框。

更新：由於cassiorenan correctly points out，使用百分比允許圖像自動縮放，如果你改變圓的大小。由於1 /開方（2）= 0.707 ...，你可以用70.7％，而非141px：

background-size: 70.7%;

來源

2014-07-19 18:43:31

我只是想說同樣的話。這就是你如何正確地將一個正方形放入一個圓圈。 – Andrew

正如我在我的評論說，你必須刪除透明邊框/空間圖像周圍或者如果你不想這樣做，那麼使用這個CSS

.circle { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    border-radius: 100px; 
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') center; 
    background-size: 130%; 
}

來源

2014-07-19 18:40:21 mdesdev

給後臺大小像background-size: 100px;那麼它定位在div的中心，告訴它不要重複：

 background-size: 100px; 
     background-position:50%; 
     background-repeat:no-repeat;

的編碼，現在應該是這樣的：

.circle { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    border-radius: 100px; 
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') ; 
    background-size: 100px; 
    background-position:center center; 
    background-repeat:no-repeat; 
}

JSFiddle Demo

來源

2014-07-19 18:42:43

改變背景大小的百分比（因此它仍然有你相同的相對大小ragardless改變圓的寬度/高度）並居中。當你在這裏時，告訴它不要重複。在您的特定情況下，此代碼的工作：

.circle { 
     width: 200px; 
     height: 200px; 
     border: 1px solid black; 
     border-radius: 100px; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png'); 
     background-size: 90%; 
     background-repeat: no-repeat; 
     background-position:center; 
    }

編輯：固定碼格式。

來源

2014-07-19 18:50:18

如何在圓形邊框內放置正方形的HTML圖像？

回答

相關問題