search

hongkhanh / cropbox

A lightweight and simple JavaScript, Jquery, YUI plugin to crop your avatar
http://hongkhanh.github.io/cropbox/
MIT License
264 stars 99 forks source link

Plugin doesn't work well with borders #3

Open daveshapiro opened 9 years ago

daveshapiro commented 9 years ago

Given the same design as your demos (http://cssdeck.com/labs/t8bdodvj), you would expect a cropped image of 200x200px, however the resulting cropped image is actually 198x198px.

I've attempted to account for this by setting the thumbBox to 202x202px, however the plugin doesn't position the image correctly as it's attempting to align under the border of thumbBox instead of within the crop region.

hongkhanh commented 9 years ago

Hi,

It depend on your thumb box style. You can remove box-sizing: border-box from thumb box class for quick fix.

Cheers,

daveshapiro commented 9 years ago

Unfortunately, that's incorrect. In fact, your demo includes box-sizing: border-box and exhibits the behaviour I described.

Part of the problem is that your plugin uses $().width() and $().height() everywhere which only returns the content width and the border is not part of the content width (thus 198x198 with a 200x200 div).

hongkhanh commented 9 years ago

You should remove box-sizing: border-box from thumb box class, cheers

On 06/11/2014 06:55, daveshapiro wrote:

Unfortunately, that's incorrect. In fact, your demo includes box-sizing: border-box and exhibits the behaviour I described.

Part of the problem is that your plugin uses $().width() and $().height() everywhere which only returns the content width and the border is not part of the content width (thus 198x198 with a 200x200 div).

— Reply to this email directly or view it on GitHub https://github.com/hongkhanh/cropbox/issues/3#issuecomment-61904520.

daveshapiro commented 9 years ago

It's correct that removing box-sizing from thumbBox will fix it's content width to the expected 200x200, however this causes a different issue (the same issue I described when resizing thumbBox to 202x202): the image is not positioned correctly within thumbBox. The top-left corner of the image is under the border which, when testing with a 200x200 image, results in the top row and left column of pixels to be removed and the bottom row + right column of pixels set to white.

My point is that the border of the thumbBox is outside of the crop region (which is the correct behaviour), so the image should be positioned to the content of the thumbBox, not to the outer edge.