如何创建圆形图像包装器

Question

如下图所示，如果用户将图像保存到他/她的机器图像中，如何创建css应该是正方形，宽度和高度应该是原始图片。

Answer 1

您可以通过设置图像容器的边框半径并应用隐藏的溢出值来实现此效果。这里有一个例子 - 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 2

请参阅此示例：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 3

你有几个选择。

首先，你可以有一个元素（比如一个div），其背景图像作为原始图像。然后在那个div中你有一个图像，内部圆圈内部有一个部分透明，所以原始图像显示在下面。

其次，您可以执行与上面类似的操作，但是您可以使用CSS和HTML的混合创建圆形，而不是使用透明图像。有一些不错的demos here。

第三，可能是最黑客的方式，就是将所有内容放入一个图像（如问题中），然后使用.htaccess为直接访问提供不同的文件。但是，您可能无法获得非常可靠的结果。这是一个nice SO answer解释。