how to define a header in sap UI5 so image is not streched/compressed

[former_member342469]

hi ,

When I declared an image in the header, the image was compressed. I modified CSS to look it good. But now when i run same app in ios phone, image looks streched. How to modify it to look good on all screen sizes. This is a mobile app.

Thanks,

Sangeeta

[saivellanki]

Hi Sangeeta,

Which measure unit did you use for CSS Image width, is it in "px" or "%"?

If you're using "px" please change it to "%". Since, different platforms like mobile/tablet/desktop will have different screen pixels. You can check in the console -

window.screen.availWidth

So, better use "%" like below -

var oImage = new sap.m.Image({src:"image", width:"20%"});

Regards,

Sai Vellanki

[former_member342469]

thanks for your reply Sai.

I have used below css

.sapMIBar{ height: 5rem; }

.sapMHeader-CTX { height: 5rem; }

And header is defined as

<headerContent>

            <Image

                height="100%"

                src="img/header.png"

                width="100%" >

            </Image>

        </headerContent>

Is it a right approach?

[saivellanki]

Hi Sangeeta,

Can you please tell me the image resolution size that you're inserting in page header bar?

Regards,

Sai Vellanki.

[former_member342469]

Hi Sai,

The image is 720px x143px

Thanks & Regards,

Sangeeta

[saivellanki]

Sangeeta,

If possible can you post the screenshots of both desktop and mobile versions, so that it will be easy to me to check what is happening.

Regards,

Sai Vellanki.

[former_member342469]

Hi Sai,

Tablet screenshot

Smartphone screenshot

Thanks,

Sangeeta