如何创建圆形图像包装

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解释。