Discussion Forums  >  Images, Documents, File Locations

Replies: 8    Views: 135

mutzy
Aspiring developer
Profile
Posts: 841
Reg: Nov 03, 2010
Medford, MA
9,860
03/23/13 02:01 PM (12 years ago)

Best way to size images in html

I apologize if this has been asked before, couldn't find anything that quite answered my question on the form. My medical apps tend to be mostly html files with primarily text and tables but few images thrown in here and there. I use the same html files for both the iOS and android version. Is there a best practices way of formatting images in the html files? My tables are set to a width of around 99%. Most of my images are 640x960 pixels. I've found through trial and error that it looks best on iPhone with a width of 300 so that's what I set it at. Otherwise tables in the same file look much too narrow. So naturally these images look smaller than I'd like on the iPad. I thought about looking for code stating something like "if iPhone, use this width. if iPad, use this width". however I'd like this code to work on android phones as well. Is it possible to do something like "width = 100% or 640 px, whichever is less?" thanks for any help you can give... josh
 
ictguy
Aspiring developer
Profile
Posts: 564
Reg: Jun 17, 2011
Mildura, Austra...
15,840
like
03/23/13 02:45 PM (12 years ago)
There are some good articles around on how to to do 'responsive images'. If I want an image to fill the available space I usually set the image attributes to something like this style="max-width:100%; max-height:100%; margin-left:auto; margin-right:auto; display: block;" This is a good article on responsive techniques http://css-tricks.com/which-responsive-images-solution-should-you-use/ This site also links to a spreadsheet with a matrix of features for each project I'd be interested to see what you eventually go with. cheers Darrel
 
Tooly
Aspiring developer
Profile
Posts: 24
Reg: Jun 29, 2012
Omaha, NE
8,390
like
03/23/13 02:56 PM (12 years ago)
For the app that I'm working on I had the same issue trying to get images to automatically fit onto an iPhone and iPad. Through searches and much trial and error this code worked for me. Note that I also wanted my images to be zoomable. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width, maximum-scale=3.0" name="viewport" /> <style type="text/css"> html{background-color:#000000;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <p> <img src="file url" style="max-width: 100%; max-height: 100%;" /></p> </body> </html>
 
mutzy
Aspiring developer
Profile
Posts: 841
Reg: Nov 03, 2010
Medford, MA
9,860
like
03/23/13 03:27 PM (12 years ago)
The problem is I don't want to set the max-width to 100% because the width of the image file is only 640 and will therefore be blurry on a tablet. I'll keep looking...
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
03/23/13 04:34 PM (12 years ago)
If you set the image width to a percentage, you can choose any value - It doesn't have to be set to 100%; the percentage is linked to the width of the device.
 
mutzy
Aspiring developer
Profile
Posts: 841
Reg: Nov 03, 2010
Medford, MA
9,860
like
03/23/13 04:38 PM (12 years ago)
Right... I want 100% for iPhone but not 100% for tablets since the images width are only 640. That's the problem. I also don't want to say width=300 because while that's great for iPhone, not so much for tablets.
 
AussieRyan
Aspiring developer
Profile
Posts: 148
Reg: Mar 21, 2012
Margate, QLD Au...
1,480
like
03/23/13 05:27 PM (12 years ago)
I would suggest ro-creating the images so that they are the max width for the iPad. They will then scale with the above code for all other devices.
 
Stobe
buzztouch Evangelist
Profile
Posts: 1528
Reg: Mar 04, 2011
Fredericksburg,...
24,680
like
03/23/13 05:30 PM (12 years ago)
I made a "Double HTML" tool a while back that let you use a separate HTML doc for large devices vs small devices. (Make 2 different html files, and change just the images, etc). That was made for the v1.5 html doc screen, but the logic used would probably still work for the v2.0 html doc plugin. Send me a PM if you want me to send you some code, etc. -Chris
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
03/24/13 04:44 AM (12 years ago)
Programmatically, standard iPad screen width is 768 pixels I believe - if your images were 20% bigger, your solution would be easier. Or if you have hi-res images, the IOS @2x solution can help (google that one, a bit to convoluted to explain here). If you don't want to change the images from 640 width and you want full size on iPhone, you might be able to do some clever stuff with conditional stylesheets in html, but it might be a lot of effort if there are a lot of pages. I think most of the available options have been identified, but they are each compomises in there own way, you just need to decide on the compromise that best meets your requirement.
 

Login + Screen Name Required to Post

pointerLogin 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.