Best way to size images in html

Get Started | Login

Discussion Forums > Images, Documents, File Locations

Replies: 8 Views: 135

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	confirm \| cancel 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 Title Comments 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 Posts: 564 Reg: Jun 17, 2011 Mildura, Austra... 15,840	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 Comments 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 Posts: 24 Reg: Jun 29, 2012 Omaha, NE 8,390	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> Comments 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 Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	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... Comments 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 Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	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. Comments 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 Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	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. Comments 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 Posts: 148 Reg: Mar 21, 2012 Margate, QLD Au... 1,480	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. Comments 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 Posts: 1528 Reg: Mar 04, 2011 Fredericksburg,... 24,680	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 Comments 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 Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	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. Comments 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 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.