Ethos Photo: Getting the Right Size

[MartinRayVaughan]

At https://www.martinrayvaughan.com/, I am trying to find the right balance for showcasing my photography (the whole point of the Ethos Photography template).
The issue I am seeing is that when you load in large, high quality pics the template is zooming in incredibly close on my photos - and also pixelating them as a result.
If you use the one-page navigation and get down to ‘Photography’ you’ll notice what I mean with the horse jockey in yellow. The original of that photo can be found at https://www.martinrayvaughan.com/wp-content/uploads/2021/11/IMG_6574.jpg for reference.
How can I scale this concept back a bit so my photos don’t lose their clarity? Even if I compromise the vertical size?
The HUGE gap element over top of these photos says “65 PX” but when you touch the slider it jumps down to “36” and won’t go any higher. Not sure why.

Thanks,
Marty

[ruenel]

Hello Marty,

Thanks for writing in! The image were resized in order to apply the parallax effect. You can compare by disabling the Parallax effect and then set the background size to “Contain”.

To fully understand how the background images works, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image size display within the container.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

[MartinRayVaughan]

Thank you - setting to ‘contain’ helped a great deal!

[ruenel]

You are most welcome, @MartinRayVaughan.