如何創建圓形圖像包裝

Question

如下圖所示，如果用戶將圖像保存到他/她的機器圖像時如何使用css創建，應該是原始圖片的正方形和全寬和高。

Answer 1

請參閱此示例：http://dabblet.com/gist/5450624（在Firefox 20/Chrome上測試）。
我使用了一張400x400的jpg圖片，我已經調整了它的上/左偏移量。

相關CSS

div { 
    position: relative; 
    width: 0; 
    height: 0; 
    border: 180px silver solid; 
    -webkit-border-radius: 180px; 
    -moz-border-radius: 180px; 
    border-radius: 180px; 
} 

figure { 
    position: absolute; 
    top: -120px; 
    left: -180px; 
    width: 200px; 
    height: 200px; 
    border: 10px red solid; 
    overflow: hidden; 
    -webkit-border-radius: 120px; 
    -moz-border-radius: 120px; 
    border-radius: 120px; 
} 

img { 
    position: absolute; 
    z-index: 1; 
    left: -100px; 
    top: -100px; 
} 

標記

<div> 
    <figure> 
    <img src="..."> 
    </figure> 
</div> 

---

樣本輸出

Answer 2

可以實現通過設置圖像容器的邊框半徑，將一個隱藏的溢出值這個效果。一個例子是在這裏 - http://jsfiddle.net/8jbD5/1

你的HTML代碼將是這樣的：

<div id="imgCont"> 
    <img src="theimage.jpg" /> 
</div> 

和CSS：

#imgCont{border:8px solid #f00;border-radius:50%;overflow:hidden;width:200px;height:200px} 
#imgCont img{width:100%;height:100%;} 

我希望這有助於...

Answer 3

你有幾個選擇。首先，你可以有一個元素（比如div），其背景圖像作爲你的原始圖像。然後在這個div裏面，你有一個內部圓的內部透明部分的圖像，以便原始圖像通過底部顯示。

其次，你可以做類似於上面的，但不是使用透明圖像，而是使用CSS和HTML混合創建圓圈。有一些不錯的demos here。

第三，也許是最hacky的方式，將所有內容放在一個圖像中（如在您的問題中），並使用.htaccess爲直接訪問提供不同的文件。儘管如此，你可能得不到可靠的結果。這是一個nice SO answer解釋。