html - 如何创建圆形图像包装

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 的混合创建圆圈，而不是使用透明图像。这里有一些不错的演示。

第三，可能是最老套的方法，就是将所有内容都放入一个图像中（就像您的问题一样），并用于.htaccess在直接访问时提供不同的文件。但是，您可能不会得到非常可靠的结果。这是一个很好的答案，可以解释。