CSS圓圖：“操作方法”完整指南
原始資料：CSS Circle Image
圓形圖像CSS問題：圖像為矩形或正方形。
您始終可以使用Gimp或Photoshop之類的照片編輯器將圖像裁剪成一個圓形（如果您要從PhotoshopSupply進行此自動操作，將圖像裁剪為任意形狀），甚至可以使用MockoFun等在線工具將圖片裁剪為圈子在線。但是這篇文章是關於如何使用CSS製作圓形圖像的。
那麼，如何僅使用CSS製作圓形圖像？
在本文中，我將向您展示如何使用CSS將矩形或正方形圖像轉換為圓形圖像。
CSS圓形圖像使用 border-radius
製作CSS圓形圖像的最簡單解決方案是使用 border-radius。這用於為HTML元素製作圓形邊框，因此它也適用於圖像。
要使此方法適用於所有尺寸比例（風景，縱向或正方形）的圖像，必須使圖像具有父HTML元素（也稱為包裝器）。我們將使用 span元素作為circle-imageCSS類名稱的包裝。
這是HTML代碼：
<span class =“ circle-image”> <img src =“ your-image.jpg” /> </ span>
以及用於製作圓形圖像的CSS：
.circle-image {
顯示：inline-block;
邊界半徑：50％；
溢出：隱藏；
寬度：50像素；
高度：50px；
}
.circle-image img {
寬度：100％;
高度：100％;
適合對象：封面；
}
這就是顯示HTML圓形圖像所需的所有CSS代碼！
我display:inline-block之所以 使用它 span是因為默認情況下 inline，我需要為它設置尺寸的東西。
設置 border-radius為50％實際上是創建CSS圓角圖像的原因，因為它會以圖像整體尺寸的50％（一半）的半徑倒角。
對於 imgI，我只是使用100％作為尺寸，以確保它緊貼包裝元件內。
這樣 object-fit:cover 可以確保保持圖像比例，因此不會拉伸圖像比例。
這種方法很簡單，但並非沒有不便之處。例如，您必須輸入圖像的尺寸。我輸入了50px，但您必須輸入所需的尺寸。
CSS Circle Image使用 background-image
基本上，我們使用CSS在HTML元素的背景上設置圖像，並使元素變圓。
這將顯示我們的圓圈圖像。這是HTML代碼：
這是HTML代碼：
<div class =“ circle-image”> </ div>
和我們的圓圈圖片CSS代碼：
.circle-image {
寬度：50像素；
高度：50px；
背景圖片：url（'your-image.jpg'）;
背景尺寸：封面；
顯示：塊；
邊界半徑：50％；
}
做完了！
如果您需要將圖像放置在圓內的其他位置，則可以使用 background-positionCSS屬性指定左側和頂部的位置，或者指定的組合 bottom|top|center|left|right。
在大多數情況下，這些解決方案就足夠了，但是如果您需要使用CSS製作響應式圓形圖像怎麼辦？
響應式圓圖CSS
無論我們是否喜歡，響應式網頁設計都是網站的一項重要要求。讓我們看看我們需要在上面的圓形圖像CSS代碼中進行哪些更改，以製作響應式圓形圖像。
HTML代碼保持不變，因為我們仍然需要包裝元素：
<span class =“ circle-image”> <img src =“ your-image.jpg” /> </ span>
以及響應式圓形圖像CSS代碼：
.circle-image {
顯示：inline-block;
溢出：隱藏；
寬度：33％;
底部填充：33％；
高度：0；
職位：相對
}
.circle-image img {
寬度：100％;
高度：100％;
位置：絕對；
邊界半徑：50％；
適合對象：封面；
}
那麼，我們做了什麼改變？
好吧，首先，我們 width為 span包裝元素設置了一個百分比。這使圓形圖像具有響應性。我使用了33％，因此它將縮放到圖像容器的三分之一。
我知道CSS響應式圖像還有更多的東西，例如媒體查詢，但這超出了本文的範圍。
這是一個巧妙的技巧：
設置height為0並 padding-bottom與相同 width是將span形狀變為正方形的CSS技巧 。我們需要這樣做以確保圖像變為圓形而不是壓縮的橢圓。
我沒有想出這個，我發現這招如何讓一個HTML元素的CSS方形這裡。
我們為包裝元素設置的最後一件事是 position:relative。這是因為裡面的圖像將具有 position:absolute並且我們希望圖像的位置與包裝元素有關，而不是與整個文檔有關。
最後，我們 border-radius再次將其設置為50％，但這一次是在圖像上。這將使圖像變成一個圓圈。
用CSS製作圓形圖像 clip-path
現在，讓我們看看將CSS用於圓形圖像的另一種方法。
該 clip-path CSS屬性創建裁剪區域應顯示套什麼元素的一部分。顯示區域內部的部分，隱藏外部的部分。此CSS屬性的值之一是 circle。
語法如下：
剪切路徑：circle（[<radius>]？[at <position>]？）
因此，使用此CSS屬性，您可以裁剪具有指定半徑和指定中心的圓形圖像元素。
HTML代碼保持不變：
<span class =“ circle-image”> <img src =“ your-image.jpg” /> </ span>
在自適應圓形圖像CSS代碼中，我們僅替換border-radius為 clip-path：
.circle-image {
顯示：inline-block;
溢出：隱藏；
寬度：33％;
底部填充：33％；
高度：0；
職位：相對
}
.circle-image img {
寬度：100％;
高度：100％;
位置：絕對；
剪切路徑：圓（50％）;
適合對象：封面；
}
添加該clip-path屬性會將圖像裁剪為半徑為包裝元素一半的圓形。如果你需要
結論
您有很多製作CSS圓形圖像的選項形式，現在您都知道它們的優缺點。如果您有任何疑問或意見，請在下面給我留言，我將盡力提供幫助。
如果您喜歡這篇文章，並且希望學習HTML和CSS，那麼我建議您接下來閱讀我的文章Create Beautiful HTML Bar Charts。
留言列表
