Question
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.
Thanks,
Deepika Kumar
Hi Mahab,
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.
Thanks,
Deepika Kumar
Hi Deepika
Try to use the custom image from the UI gallery sample instead of yours and see if you can still reproduce the issue.
Hi Mahab,
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.
Hi Deepika
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.
Bhuvana.
Thank you. We have currently centered the image so that the white spaces are synchronous on both sides.
Thanks,
Deepika Kumar
Hi Deepika
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.
Hope that helps.