Question

Use Case

Show a photo uploaded by the user in a square box with rounded corners. The image will have a landscape aspect ratio, but it needs to be cropped to square to fit inside the the container. We have decided to show only the right side of the photo (making the left side of the photo no longer visible).

Assume the following

• The photo cannot be pre-processed, I am looking for a CSS only solution
• The photo can be scaled up/down to fit in the required space
• The photo must maintain its original aspect ratio (and cannot be stretched to fit)

Example Code

See this fiddle for a demonstration
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>

The Problem

Chrome and Safari show the image with square corners and does not show rounded corners at all.

Possible Cause

It seems webkit will only allow rounded corners on the container and does not apply the rounded corners to children or crop them in any way. This applies to elements with overflow set as hidden.

What does not work

You can try setting rounded corners on the image itself. But this doesn’t work in my case because that would only put rounded corners on the right side, and square corners on the left.

See the following fiddle to demonstrate:
http://jsfiddle.net/VF6m3/

Answer 1

This is know issue with simple work around – set image as background and border-radius on the container.

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