X3Photo Gallery Forums

MaciejK wrote:On desktop it looks nice, scaled to full width of the screen as Background Size is set to cover. When I see it on iPhone the image is very large. It is just not scaled down to screen width what would be desired.

By default, it's set to "cover" and 100% height, right? In this case, it will scale the image to 100% of the viewport, and also make sure the image covers the screen, which will likely mean some of the image gets cropped, so that it completely covers the viewport. On desktop, since your image is likely same/similar aspect the screen, it will look nice and crop just some of the image. You can resize your browser a bit width/height and see how it adjusts while still cropping the image.

On mobile, this of course means the image, which is completely different aspect from the phone screen, will still be 100%, but cropped a lot. You can try some variations of modifying the settings from "cover" to "contain" and changing the "height", but the best solution in your case, would be to simply uncheck the "custom height" option.

That would mean the image will scale down to perfectly fit the screen, also on mobile devices. You are not forcing any height, and it will consume exactly the amount of height it needs, depending on screen size and it's own size. The disadvantage here, is that it won't consume exactly the entire viewport (which you can otherwise achieve by setting "custom height"), but you can't magically achieve a combination of both options. You need to choose a solution that is acceptable on all screens.

MaciejK wrote: Ok. That is clear now.
But… is it possible to have custom height set for desktop and keep behaviour of automatic height for phones? e.g by some CSS styling tweak?

What you ask for is a bit dodgy. When automatic height is selected, we embed the <img> directly on the page, as the height will the naturally scale to the width of the image. This is the only way it can be "automatic". However, when custom height is set, we add the image as a "Background image", in which case it doesn't (and can't) control the height, which is then controlled manually. So we can't really change this dynamically, as the method is "created" when the page loads.

It could be possible to change the HEIGHT of the area (where the image scales inside) based on mobile or desktop. For example scale height down to 50% of screen on mobile devices. You could also adjust background-attachment, background-size and background-position also. You would also need to selectively decide what screen size and aspect you want to selectively change the height. Also, you need to plan if you want the fix for only this one page, or intro images on all pages. All in all, a bit clumsy and tedious, but it's possible to make certain adjustments.

Suggestion: Why not just set it to automatic height in the first place? If it's a horizontal image, it would almost fit the entire screen on desktop (like now), and then work exactly as you want on mobile. If it's important that the image doesn't scale "beyond" the viewport on desktop, you could add some simple CSS fixes that limit the height. Let me know if you want some help with this.