Optimizing Image Display for Consistency on Mobile and Desktop Devices

I’ve included an image component in my design, utilizing an image. I’ve configured the Aspect Ratio to “Auto” and the Size to “Full.” It appears perfectly on mobile devices; however, on desktop, it appears nearly 10 times larger. I attempted to adjust the Aspect Ratio and Size to reduce its size, but this resulted in it becoming smaller on both mobile and desktop screens.

Could someone kindly offer suggestions for achieving a balanced appearance on both mobile and desktop devices?

Use the DeviceInfo column somewhere in your database, get the user’s device width and show/hide the image components as needed based on that value.

2 Likes