Question

I need to display an arbitrarily-sized image inside a fixed-size block. The image needs to have its corners rounded. The image must fill up the entirety of the block; if it is bigger or smaller than the block it must be resized, if the image’s aspect ratio is different from the block’s it must be cropped and centered vertically and horizontally.

So far I’ve tried:

• Rounding the corners of the block using CSS border-radius – image appears through the rounded corner in Opera (Example).
• Rounding the corners of the image using CSS border-radius – rounded corners are removed by cropping.
• Rounding the block with the image as its background using CSS border-radius – image is not properly resized.

I would prefer a pure CSS solution, but JavaScript/jQuery solutions are also appreciated. I’m looking for solutions that will at least work across modern browsers and degrade gracefully on older browsers (square corners, image doesn’t break out of the block, etc).

Answer 1

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).