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

Question

用例

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

假设如下

• 照片无法预处理，我正在寻找纯 CSS 解决方案
• 照片可以按比例放大/缩小以适合所需的空间
• 照片必须保持其原始宽高比(不能拉伸(stretch)以适合)

示例代码

请参阅此 fiddle 进行演示 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 显示带方 Angular 的图像，根本不显示圆 Angular 。

可能的原因

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

什么不起作用

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

请参阅以下 fiddle 进行演示: http://jsfiddle.net/VF6m3/

Answer 1

这是已知问题，只需简单解决 - 将图像设置为背景并在容器上设置边框半径。

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