search

scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 305 forks source link

CSS: how to change image shape to circle? #167

Closed ericgopak closed 8 years ago

ericgopak commented 8 years ago

Hi there and thank you for the great work! The plugin is amazing in many senses.

I have tried to apply CSS rules with border-radius: 50% and it worked on version 0.4.5, but does not work anymore in 0.5.1.

Could you please suggest any solution?

ericgopak commented 8 years ago

One possible solution on 0.4.5 is to add a nested

under the cropit-image-preview with white background-color and a border-radius: 50%. This solution no longer works for the newer version.

scottcheng commented 8 years ago

You need to do two things:

  1. Class names and markup structure were changed in 0.5, and you need to set border-radius on .cropit-preview-image-container, not .cropit-image-preview.
  2. The preview image used to be a background-image, and now it's an img tag. This seems to be an issue when you set border-radius and overflow: hidden on the container (.cropit-preview-image-container). Setting a z-index on the container seems to solve the problem. See this post for other solutions.
ericgopak commented 8 years ago

Perfect, thank you very much for the reply. It solved my problem