CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kotekzot
kotekzot

Reputation: 1588

Displaying an arbitrarily-sized image with rounded corners inside fixed-size block

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:

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

Upvotes: 0

Views: 486

Answers (1)

Oleg
Oleg

Reputation: 9359

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

Upvotes: 2

Related Questions