Jump to content

Adjusting Image Width By Resolution


jpkuelho
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...