Image size does not adjust automatically when the screen resolution is less than 100%
Problem statement - An image has been included in a dynamic layout in a section. The image size is set to auto. The image loads as expected in the full screen when the screen resolution is 100%. But when the resolution is reduced, the image size is reduced and a grey space appears in the remaining part of the screen. Please advice on how to auto adjust the size of the image with respect to the screen resolution. Screenshots attached for reference.
I am a bit confused. To me, both your Before Zoom and After Zoom image appears the same.
Moreover, I think you meant to say that the image loads as expected in the full screen when the zoom is set to 100%. Instead you wrote screen resolution. Could you clarify? Because it is possible to have different screen resolutions and still play with zoom.
Try playing with the custom image example in the UI gallery. Whatever behavior you see there would be the expected behavior.
Thanks for the response. Yes, the issue i meant was when we change the zoom percentage. Not anything to do with the screen resolution.
We have added a custom image, but facing an issue when the zoom is less than 100%. The image does not adjust to still display on the full screen. It starts reducing in size and leaves a blank space in the remaining part of the screen. That would be the difference you can see in the 2 images that i have attached.
I have tried using the existing images from Pega instead of our custom image and I see that the image gets smaller and leaves a grey space on the remaining part of the screen. The custom images were quite small though.
If you look in the UI gallery, they mention that the image/icon is used to invoke some action from them. I don't think you are using images in your application in this context which explains why your image is not small.
In order to accomplish what you need, you may have to look for solutions outside of Pega. Search on stackoverflow or google to see if you can incorporate css changes to achieve what you want.