Question

我需要在固定大小的块内显示任意大小的图像。图像需要圆角。图像必须填满整个块;如果它大于或小于块，则必须调整大小，如果图像的宽高比与块不同，则必须将其裁剪并垂直和水平居中。

到目前为止，我已经尝试过：

使用CSS border-radius-the圆角块的角落 - 图像通过Opera（Example）的圆角出现。
使用CSS border-radius舍入图像的边角 - 通过裁剪删除圆角。
使用CSS border-radius对图像作为背景舍入块 - 图像未正确调整大小。

我更喜欢纯CSS解决方案，但也赞赏JavaScript / jQuery解决方案。我正在寻找的解决方案至少可以在现代浏览器中使用，并且在旧浏览器上优雅地降级（方角，图像不会突破块等）。

Answer 1

为什么不尝试 this fiddle 我做的？

这个想法是使用background-size: cover; CSS属性来处理居中，裁剪和覆盖。这是小提琴的摘录：

div.yourWrapper {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: url('some_image.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我不知道在IE中如何降级并严重，因为extremely low market adoption支持Opera是错误的（但这是我个人的意见，你现在可以开始对我大吼大叫）。

在固定大小的块内显示带有圆角的任意大小的图像

1 个答案: