How to handle images with orientation changes?

Get Started | Login

Discussion Forums > Uncategorized

Replies: 4 Views: 174

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	confirm \| cancel 01/09/12 05:11 PM (14 years ago) How to handle images with orientation changes? Hi, I was wondering how you guys do this: for example with the image gallery or the header image. If you design for the ipad (768px width) and insert a header image with this width it looks bad when the user goes to landscape. Same goes for iPhone. Any suggestions on this issue? Thanks in advance and Best Regards, Danny Title Comments Hi, I was wondering how you guys do this: for example with the image gallery or the header image. If you design for the ipad (768px width) and insert a header image with this width it looks bad when the user goes to landscape. Same goes for iPhone. Any suggestions on this issue? Thanks in advance and Best Regards, Danny

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	01/09/12 05:16 PM (14 years ago) You can design for the landscape width but keep the main content within the 768 px center. The image will load full size, but only the 768 px center will be visible in portrait, while the whole image will be visible in landscape. Comments You can design for the landscape width but keep the main content within the 768 px center. The image will load full size, but only the 768 px center will be visible in portrait, while the whole image will be visible in landscape.

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	01/09/12 05:25 PM (14 years ago) Hi MgoBlue, thanks for getting into this. I don't really get what you are saying. Assume I create a header image for portrait mode (width 768px and height 100px). When the orientation changes to landscape I get my image centered (but too short) in the top of the screen. The rest of the (menu or rss) is in full width of the device. if I design an image for the landscape orientation (width 1024px and height 100) then not all of the image is shown on the portrait orientation. Best Regards, Danny Comments Hi MgoBlue, thanks for getting into this. I don't really get what you are saying. Assume I create a header image for portrait mode (width 768px and height 100px). When the orientation changes to landscape I get my image centered (but too short) in the top of the screen. The rest of the (menu or rss) is in full width of the device. if I design an image for the landscape orientation (width 1024px and height 100) then not all of the image is shown on the portrait orientation. Best Regards, Danny

Parker @ buzztouch buzztouch Evangelist Posts: 1395 Reg: May 09, 2011 Pacific Grove, ... 24,500	01/09/12 05:41 PM (14 years ago) Hi Danny, I think that is what MGoBlue is saying, that you should design your image in landscape orientation conscious that part of the image will be cut off. If you design it right the important part of te image will still be visible and you only lose a bit of the sides/background. Another option is to design for portrait mode and make your images in a way so that they blend into the background of the screen itself. Think of a logo with a white background on a screen with a white background. There will never be a border separating the image from the background of the screen so rotating the device won't really affect the display. Another option is to not allow the device to rotate. (iPhone only as iPods must be allowed to rotate.) So it's all going to be about finding a balance between the two orientations. Good luck! Comments Hi Danny, I think that is what MGoBlue is saying, that you should design your image in landscape orientation conscious that part of the image will be cut off. If you design it right the important part of te image will still be visible and you only lose a bit of the sides/background. Another option is to design for portrait mode and make your images in a way so that they blend into the background of the screen itself. Think of a logo with a white background on a screen with a white background. There will never be a border separating the image from the background of the screen so rotating the device won't really affect the display. Another option is to not allow the device to rotate. (iPhone only as iPods must be allowed to rotate.) So it's all going to be about finding a balance between the two orientations. Good luck!

PSMDanny Apple Fan Posts: 1166 Reg: Dec 09, 2011 Heerlen 21,940	01/09/12 05:46 PM (14 years ago) Hi Parker, Thanks. This will help me to accomplish my needs (I guess, depends on what gets cut of from the image) Another option is to design for portrait mode and make your images in a way so that they blend into the background of the screen itself Gonna try and post my experience. Best Regards, Danny Comments Hi Parker, Thanks. This will help me to accomplish my needs (I guess, depends on what gets cut of from the image) Another option is to design for portrait mode and make your images in a way so that they blend into the background of the screen itself Gonna try and post my experience. Best Regards, Danny

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.