0

用例

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

假设以下

  • 照片无法预处理，我正在寻找仅 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/

4

1 回答 1

0

这是通过简单的工作解决的已知问题 - 将图像设置为容器上的背景和边框半径。

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

于 2012-06-18T22:39:28.073 回答