Hi there,

I don't see any extra scroll bars. The image is displaying as it should (i.e. filling the browser window to the max size without cropping).

If you don't see your changes, maybe clear your browser cache.

Best,

Christopher

Sure:
http://livingaikido.life/gallery/

Hi there,

There shouldn't be any scrolling with that approach. It should auto-fit the space available (with black in the areas it can't reach).

Can you provide a link to your site? I'll check it out.

Best,

Christopher

Hi Christopher.
Yes, it help in a sense. Now the pictures are visible, granted with scrolling. Better than before, but not entirely what I had in mind. Is there any way to make the image FIT within the container, without the need to scroll. I did try modifying the code with height: auto and other variations but to no avail.

If not possible, I will settle for this option you gave. It would be nicer if the pics were automatically resized to fit, even if that left black space around them (for non-landscape pictures).

Let m know please what can be done.
Thanks a lot!!

Bo

Hi there,

The gallery page displays images via the "cover" CSS background size option. This scales the image to be as large as possible so that the area is completely covered by the image. As a result, some parts of the image may not be in view depending on the browser window size/orientation.

I made this design decision based on the fact that the vast majority of screen dimensions are 16:9, which makes this the preferred method for full screen image viewing.

If you do NOT want images to be viewed full screen like this, you can try using the "contain" option, which limits the size of the image to the boundaries of the viewing window. To try this, add the following to your Custom CSS box on the Customize page...

.gallery-image {background-size: contain;}
.page-template-page-gallery #headerImages {display: none;}

Hope that helps!

Best,

Christopher

Hi,
Been trying so much to make this work. Now I need to figure out how to display images in the Gallery page, without manually resizing everything...People see them different on various devices, cut-off, etc. Is there a way to by default center and automatically resize the images displayed inside the GALLERY page?

Thank you
Bo