0

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

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

  • 使用 CSS 边框半径对块的角进行圆角 - 图像通过 Opera 中的圆角出现（示例）。
  • 使用 CSS 边框半径对图像的角进行圆角 - 通过裁剪去除圆角。
  • 使用 CSS 边框半径以图像为背景将块四舍五入 - 图像未正确调整大小。

我更喜欢纯 CSS 解决方案，但 JavaScript/jQuery 解决方案也值得赞赏。我正在寻找至少适用于现代浏览器并在旧浏览器上优雅降级的解决方案（方角，图像不会超出块等）。

4

1 回答 1

2

Why don't you try this fiddle I made?

The idea is to use the background-size: cover; CSS property which handles the centering, cropping and, well, covering. Here's an extract from the fiddle:

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;
}

I have no idea how this downgrades in IE and seriously, supporting Opera is just wrong due to extremely low market adoption (but that's my personal opinion, you can start yelling at me now).

于 2012-05-22T11:36:04.200 回答