Hey guys<br />
A friend asked me about a problem with his company's page: all the images are too small compared to the size of the screen cause it's been originally designed on a smaller screen. is there any way to adapt the size of the image to the size of the screen? if not, what other possibilites do I have to help him solve his problem?<br />
I hope you can help me
<br />
bye, anna<!--content-->you can hard code the image size in the img tag but it will make it look all pixelated and blury. so I suggest to make the images bigger by redoing them.<!--content-->?one possibility could be to change the width and height to percent figures..example:<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"logo.jpg" width="100%" height="50%"><br />
<br />
?another option could be to resize all images in a graphic program (like Photoshop). The program will give you the correct ratio (width and height ) of the image.<!--content-->alright... I guess I'll try the percentage thing cause even if I redo the image size with photoshop it won't change with different screen sizes, or?<br />
ok, it's already 1 a.m. where I live so I'll do that tomorrow
<br />
thanks a lot you guys, great help, this site rocks<br />
good night<br />
anna<!--content-->Go to this link:<br />
<br />
<!-- m --><a class="postlink" href="http://www.htmlgoodies.com/beyond/post_by_screen.html">http://www.htmlgoodies.com/beyond/post_by_screen.html</a><!-- m --><br />
<br />
There is a javascript code that will allow the screen to resize based on the users screen size. It works! I use it for my site. My main page is one huge graphic that I sliced in Image Ready. Looked great on one screen size but the rest, yuck! Added this code and the graphic resizes based on the users screen size. I have 800x600, 1024x768, 1280x1024 and the 1600 gets redirected to the 1280 size.<!--content-->That is correct crazy cat, you may redirect your users to different pages per resolution size... or you may resize the images themselves. Let me caution you that if you decide to resize the images, youd run into two possibilities. <br />
<br />
One: you make images for 800x600 resolution and when they resize to fit a larger screen size, they are distorted and not sharp looking. This gets worse as the screen size gets larger, but even at 1024x768 it will be quite noticible. <br />
<br />
Two: you make images for your larger screen resolutions, and size them smaller for the smaller res's. Distortion will be less of a problem in this case, however you will be Download <!--more-->ing a much larger picture than you need... and the 800x600 user will wait longer to see a pic than neccesary. <br />
<br />
Finally, if you make different pictures for each resolution-your stuck updating two sets of files all the time, and really are duplicating your workload. I believe a better idea is to use the 'white space'... or the empty space of the web page to expand to fill up any unused areas. This way you can cleverly design a 800x600 page that looks sharp in higher resolutions.<!--content-->
A friend asked me about a problem with his company's page: all the images are too small compared to the size of the screen cause it's been originally designed on a smaller screen. is there any way to adapt the size of the image to the size of the screen? if not, what other possibilites do I have to help him solve his problem?<br />
I hope you can help me
<br />bye, anna<!--content-->you can hard code the image size in the img tag but it will make it look all pixelated and blury. so I suggest to make the images bigger by redoing them.<!--content-->?one possibility could be to change the width and height to percent figures..example:<br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"logo.jpg" width="100%" height="50%"><br />
<br />
?another option could be to resize all images in a graphic program (like Photoshop). The program will give you the correct ratio (width and height ) of the image.<!--content-->alright... I guess I'll try the percentage thing cause even if I redo the image size with photoshop it won't change with different screen sizes, or?<br />
ok, it's already 1 a.m. where I live so I'll do that tomorrow
<br />thanks a lot you guys, great help, this site rocks<br />
good night<br />
anna<!--content-->Go to this link:<br />
<br />
<!-- m --><a class="postlink" href="http://www.htmlgoodies.com/beyond/post_by_screen.html">http://www.htmlgoodies.com/beyond/post_by_screen.html</a><!-- m --><br />
<br />
There is a javascript code that will allow the screen to resize based on the users screen size. It works! I use it for my site. My main page is one huge graphic that I sliced in Image Ready. Looked great on one screen size but the rest, yuck! Added this code and the graphic resizes based on the users screen size. I have 800x600, 1024x768, 1280x1024 and the 1600 gets redirected to the 1280 size.<!--content-->That is correct crazy cat, you may redirect your users to different pages per resolution size... or you may resize the images themselves. Let me caution you that if you decide to resize the images, youd run into two possibilities. <br />
<br />
One: you make images for 800x600 resolution and when they resize to fit a larger screen size, they are distorted and not sharp looking. This gets worse as the screen size gets larger, but even at 1024x768 it will be quite noticible. <br />
<br />
Two: you make images for your larger screen resolutions, and size them smaller for the smaller res's. Distortion will be less of a problem in this case, however you will be Download <!--more-->ing a much larger picture than you need... and the 800x600 user will wait longer to see a pic than neccesary. <br />
<br />
Finally, if you make different pictures for each resolution-your stuck updating two sets of files all the time, and really are duplicating your workload. I believe a better idea is to use the 'white space'... or the empty space of the web page to expand to fill up any unused areas. This way you can cleverly design a 800x600 page that looks sharp in higher resolutions.<!--content-->