Let say we have a potentially infinite number of images, each wrapped inside of a figure set to display: inline-block so that it is the same size as the image inside. Each of these images can be any dimension, and the desired result is that the bottom of every image is perfectly aligned. The kicker here is that this is responsive, so the images may scale up or down. Here’s my thinking of how this might be accomplished:
Loop through every image and find the tallest one (outerHeight), then grab that same image’s width (outerWidth). Subtract the outerWidth from the outerHeight to get the “master” difference. Loop again through each image to calculate the difference for each specific image and subtract that from the “master” difference, then apply that number to the top margin. Rinse and repeat until each image is aligned to the bottom of the tallest image.
Viewing 1 post (of 1 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".