使用CSS / Javascript保持宽高比的同时在非正方形图像上使用圆形蒙版

Question

我们如何在非正方形图像上应用圆形蒙版并仍然保持原始图像的宽高比，即。 防止图像被挤压？ 该图像仍应填充整个圆圈。

首选仅CSS解决方案，否则可以使用jQuery / Javascript。

JSFiddle示例： http : //jsfiddle.net/vxLmrm0o/

.photo {
    position: absolute;
    z-index: 999;
    width: 160px;
    height: 160px;
    background: #ccc;
    border: 3px solid #fff;
    border-radius: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    top: 0px;
    position: relative;
    overflow:hidden;
    text-align:center;
}

.photo-bg {
    width: 100%;
    padding: 40px 0 40px 0;
    text-align: center;
    background: #ccc;
}

Answer 1

您可以使用包装器，然后设置overflow:hidden吗？ 通过相对设置包装器对象（绝对设置为img），您可以想到以下内容：

 .wrapper{ height:200px; width:200px; border-radius:50%; overflow:hidden; background: rgba(0,0,0,0.5); text-align:center; position:relative; } img { position:absolute; width: 400px; top:0; left:0; } 

 <div class="wrapper"> <img src="http://media.bestofmicro.com/R/O/464964/original/Facebook-logo-PSD.jpg" class="photo" /> </div> 

如果这是您想要的总体结果。

---

我在您设置的示例中注意到：

width: 160px;
height: 160px;

这将改变您的宽高比。

通过仅设置其中一个值，另一个将被设置为“自动”，这意味着它将按您的正确纵横比缩放。

例子1

可惜！ 这不对！

---

我看到您已经为border-radius属性添加了前缀，并将其设置为80px;

我认为这有点矫kill过正，因为实际上不需要供应商前缀。 看这里

相反，您可以将其设置为50％，并使用非前缀版本：

border-radius: 50%;

---

但是您仍然遇到“矩形”问题。 因此，您可以使用包装器解决此问题：

例子2

---

这仍然有一些问题，例如top:0; 实际上是没有意义的，因为它是设置在position：relative上的，因此对此不重要/不使用（它只能用于其他位置类型，例如absolute;位置absolute; ）

---

完成并整理之后，您可能会遇到以下问题：

DEMO

或者如我上面的代码片段所示，您可以将其“重写”为：

DEMO