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.
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
heightis 0 so the plugin doesn't work. But if I change this:To this:
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.