是一个圆角方框，图像在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

通过简单的解决方法知道这个问题 - 将图像设置为容器上的背景和border-radius。

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