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

Container without fixed height. #64

Open azeos opened 6 years ago

azeos commented 6 years ago

I have 16:9 images that needs to be cropped 1:1 on an image grid. The problem is that the grid is responsive, so setting a height is not possible.

What I do in these cases is set the image as a background and a padding-top: 100% to the container. That creates a responsive square.

Now, if I don't set a height and just use padding-top, the container height is 0 so the plugin doesn't work. But if I change this:

var containerH = $el.height();

To this:

var containerH = $el.outerHeight();

Everything works as expected.

Is there any other way to solve my problem? That change might break something? I'm using v1.1.3.

Thanks, azeos.

jonom commented 6 years ago

I think that should be fine. Here is a similar problem: https://github.com/jonom/jquery-focuspoint/issues/55 feel free to open a pull request with your solution if you like.