jpkuelho Posted August 4, 2009 Share Posted August 4, 2009 Hello there,Well I have an Image that I want to occupies the whole width of the screen, so I want it's width to be adjusted depending on the resolution of the viewer, so he doesn't get a scroll, and to keep the layout fluid, any ideas how this could be done? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2009 Share Posted August 5, 2009 JavaScript DOM can be be used to detect screen size, and make necessary changes to images etc.but the user must have javascript enabled for this to work.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function imgResize(){var imgdiv = document.getElementById("img_container");var imgdivWidth = imgdiv.offsetWidth;var myimages = imgdiv.getElementsByTagName("img");var totalimages=myimages.length; for (i=0; i<totalimages;i++) { myimages.style.width=(imgdivWidth)-1+"px"; }}window.onload=imgResize;/*--*//*]]>*/</script> <style type="text/css">#img_container {width: 99%;}</style></head><body onresize="imgResize()"><div id="img_container"><img src="1cha_imgash_thumb.gif" alt="ash" /></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted August 5, 2009 Share Posted August 5, 2009 If the image is directly under the <body> element, you can give it 100% width: <img width="100%" ...> Link to comment Share on other sites More sharing options...
jpkuelho Posted August 5, 2009 Author Share Posted August 5, 2009 Thank you very much, I guess I will use the latter, cause it's more simple Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.