How to make image fit on all types of screens

Hi everyone!

As you can see from the images below, i have a tabbar, background, and heading bar. The tab bar fits on the Iphone4s(Capture34) and the samsung galaxy s3(Capture35) but the heading does not. I made the heading an image(as i thought it was a good idea at the time). Here is the code in my script:

-- heading local heading = display.newImageRect("heading.png", 330, 50) heading.x=display.contentCenterX heading.y=display.contentCenterY-215 --background local background = display.newImageRect("background.jpg", 320, 480) background.x = display.contentCenterX background.y = display.contentCenterY --tab bar -- table to setup buttons local tabButtons = { { label="Categories", defaultFile="button1.png", overFile="button1-down.png", width = 32, height = 32, onPress=onCategoryView, selected=true, labelColor = { default={ 1, 1, 1 }, over={ 1, 1, 1 } } }, { label="Settings", defaultFile="button2.png", overFile="button2-down.png", width = 32, height = 32, onPress=onSettingView,labelColor = { default={ 1, 1, 1 }, over={ 1, 1, 1 } } }, } -- create the actual tabBar widget local tabBar = widget.newTabBar{ top = display.contentHeight -50, -- 50 is default height for tabBar widget backgroundFile = "tabBar.png", tabSelectedLeftFile = "tabBar.png", tabSelectedMiddleFile = "tabBar.png", tabSelectedRightFile = "tabBar.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } onCategoryView() -- invoke first tab button's onPress event manually -- e.g. add display objects to 'sceneGroup', add touch listeners, etc.

I tried to change the width of the image to display.contentWidth but it didnt change.

ex.

local heading = display.newImageRect("heading.png", display.contentWidth, 50) heading.x=display.contentCenterX heading.y=display.contentCenterY-215

What do you guys suggest I do?

Never mind, I have found a way to fix this. However it is not that efficient to be honest.

From what I understand the problem is with the head.

Try this:

local heading = display.newImageRect("heading.png", 330, 50) heading.x= display.screenOriginX heading.y=display.contentCenterY-215 heading.anchorX = 0

Never mind, I have found a way to fix this. However it is not that efficient to be honest.

From what I understand the problem is with the head.

Try this:

local heading = display.newImageRect("heading.png", 330, 50) heading.x= display.screenOriginX heading.y=display.contentCenterY-215 heading.anchorX = 0