grantwesthoff

@Beyondspace Sorry, just wondering if you were able to think of a solution for this yet.  Thanks again.

39 minutes ago, Beyondspace said:

Are all your images share the same dimension? for example both dimension share 16:9 or 9:16? Or at least allow some cropping on the images

That will help the solution easier

They are all very close to the same ratio, basically that 1300x1000 is spot on, they are ALL 1300px exactly on the long side, but due to the cropping (they're film scans) the short side ranges between ~970-1100px. 

Site URL: https://www.grantwesthoff.com/state-of-affairs

Hi, so my goal is to have all my images display as the same size, i.e., if a horizontal image is 1300x1000px, then the vertical images in the gallery should be 1000x1300px.  As it is now, the gallery-container has a static size based off the widest width image and that images height, it does not seem to incorporate the tallest images height.  This results in a gallery where the horizontal images are larger than the vertical images, i.e., 1300x1000px for horizontals and 800x1000px for verticals. 

I've tried a ton of different CSS approaches and feel that I really am at a place where Javascript is required to achieve this behavior from the gallery-container.  

Thanks for helping!

EDIT for visibility: I'm starting to wonder if this is even possible...

19 hours ago, grantwesthoff said:

I have a fairly heavily CSS edited page focused on simplifying (visually) the slideshow gallery.  I have it mostly set up as I'd like except the captions do not anchor to the bottom of the images since it seems the container div's width and height are set in the HTML style tag based on the max-width/height of the list of images contained in the slideshow.  

Ideally the gallery container should resize based on each images specific width and height and I am fairly sure this cannot be fixed with CSS and requires Javascript.  

Any ideas on how to resolve this?

@HoaLT Sure can! 

As you can see, there is a drastic differences between the image's bottom border and the caption.  I'd like the caption to dynamically move to "stick" to the bottom of each image.  

Also a bonus would be applying a similar resizing behavior to the slideshow controls so on the vertical images they move to have a similar padding between the image and the controls.

I have a fairly heavily CSS edited page focused on simplifying (visually) the slideshow gallery.  I have it mostly set up as I'd like except the captions do not anchor to the bottom of the images since it seems the container div's width and height are set in the HTML style tag based on the max-width/height of the list of images contained in the slideshow.  

Ideally the gallery container should resize based on each images specific width and height and I am fairly sure this cannot be fixed with CSS and requires Javascript.  

Any ideas on how to resolve this?

 Website URL