The gallery thumbnail images have a constant width and irregular height. The tallest thumbnail in the first row stops the row below from lining up correctly in the responsive grid.
I could add a border in Photoshop to the thumbs to make the height consistent which would fix the line up problem. However, this will create an undesirable affect when adding an image hover effect in the html/css template.
What html/css solutions are there for dealing with images that have have varying height?
Stretch the images to be equal height. Or align the images to the bottom, midddle, or top (but this rarely looks good), or…make the images equal height in photoshop 
.
Yes, once the aspect ratio is consistent it will make things a lot easier to work with.
Maybe you should look into GD ? Talking PHP ?
Stretching the images to a constant height works. Thank you!
As long as the stretching doesn’t distort an image too much you can get away with it.
But you don’t want photos to look like
If you set them to display: inline-block, they won’t snag like that. There are other solutions too, but that’s my favorite.
The responsive gallery requires the thumbnails have a constant width. The thumbnail images are editorial covers of various aspect ratios. This creates a problem with the image lineup in the responsive gallery. The problem can be overcome by adding a border in Photoshop to make the image height consistent. My preference is to fix the problem with html/css. Adding a fixed image height to the image container works for the desktop version. It does not work so well with mobile devices since.
Here’s one way for images and captions that need to wrap.
As ralph said inline-block is also good for various height images that need to wrap to a new line without snagging.
You could just use media queries for smaller screens and remove the fixed height and set the images to one across.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.