search

jonom / jquery-focuspoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
Other
3.15k stars 211 forks source link

Padding messing up image positioning #55

Open rctneil opened 7 years ago

rctneil commented 7 years ago

Hey,

Just been testing this out on a new site and my image wrapper that I am calling focuspoint on has top and bottom padding. This padding seems to be interfering with Focuspoint and causing the focuspoint of the image to be much higher in the container area.

Is there a way to fix this without removing the padding? I can't set a static height to the container though.

Thankyou.

jonom commented 7 years ago

You could try putting an extra div inside the container that has the padding on it, then set it to position: absolute with 100% width and height, and call focuspoint on that instead? Would need position: relative (or fixed) on the container with padding too.

erikagiroux commented 7 years ago

I've noticed this problem too and I usually add an extra div as a workaround like you said but it would be really easy to fix in the plugin.

changing

var containerW = $el.width();
var containerH = $el.height();

to

var containerW = $el.innerWidth();
var containerH = $el.innerHeight();

would include the padding in the container dimensions calculation and fix this problem.

I think it would make more sense too since the image inside uses absolute positioning, which causes it to ignore the padding.

jonom commented 7 years ago

I think I might have already done this in the v2 branch. Try it out if you like