是否可以在 webkit 中将图像裁剪为正方形的圆角方形框？

Question

用例

在圆角方框中显示用户上传的照片。图像将具有横向纵横比，但需要将其裁剪为方形以适合容器内。我们决定只显示照片的右侧（使照片的左侧不再可见）。

假设如下

• 无法对照片进行预处理，我正在寻找仅 CSS 的解决方案
• 照片可以放大/缩小以适应所需空间
• 照片必须保持其原始纵横比（并且不能拉伸以适应）

示例代码

查看这个小提琴的演示 http://jsfiddle.net/rrbZg/

<style>
.croppedPhoto {
    margin: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.croppedPhoto img {
    height: 200px;
    position: absolute;
    right: 0;
}
</style>
<div class="croppedPhoto">
  <img src="/some/random/photobucket/url">
</div>

问题

Chrome 和 Safari 显示带有方角的图像，根本不显示圆角。

可能的原因

似乎 webkit 只允许在容器上使用圆角，并且不会将圆角应用于子级或以任何方式裁剪它们。这适用于溢出设置为隐藏的元素。

什么不起作用

您可以尝试在图像本身上设置圆角。但这在我的情况下不起作用，因为那只会在右侧放置圆角，在左侧放置方角。

请看下面的小提琴来演示： http://jsfiddle.net/VF6m3/

Answer 1

这是一个简单解决方法的已知问题 - 在容器上将图像设置为背景和边框半径。

http://jsfiddle.net/VF6m3/1/