stylehatch/photoset-grid

Vertical centering of images in grid

Closed this issue · 1 comments

Thanks for your great plugin.

But I have small issue with vertical centering of images in grid row. Problem is in function for finding height of row - resizePhotosetGrid() ... $shortestImg ... $(this).find('img').each(function(){... If we have two images in a row, where first image have dimensions for e.g. w:700, h:525 and second image w:800, h:575... and these dimensions are stored as attribute in IMG tag. So if images are resized into cells by css rule 'width: auto;', for e.g. width of cell 300px, they have dimensions w:300 x h:225 for first image and w:300 x h:215 for second image. Problem is row height, which is set by first image, because first image has the shortest original height. This causes that second image has some white space above and below. I think, problem is in searching the shortest image, where is used attribute of image, where is original height, but there should be used jquery .height() function for getting actual height of image, which is resized into cell by css 'width:auto;' rule.

Is it possible to fix it? Thanks.

Could you possibly post an example of this happening at http://codepen.io/? By design the plugin calculates the row height based off of the shortest image vs. the first image.