bigheadedd Posted July 26, 2010 Share Posted July 26, 2010 Hi, I'm having a little trouble with an image scaling code. What the code does, is whenever the user scales their browser, the images on the page, scale proportionally to the size of the window. This all works fine, however what i'm after is to have text (two arrows for navigation) on the right hand side, just underneath the image. (Bottom right). I've tried wrapping the image in a div, putting the text next to the image, everything but to no avail. It always just bumps to the right hand side of the screen. Heres the code: <html> <head> <title>Test resize</title> <style type="text/css"> * { margin:0; padding:0; } #imgId { width:100%; max-width:1500px; max-height:1000px; height:auto; } </style> </head> <body> <img id="imgId" src="images/index.jpg" /> <script type="text/javascript"> var img = document.getElementById('imgId'); window.onresize = function() {adjustRatio(img);} //document.onload = function(){ adjustRatio(img);} var imageratio = img.height / img.width; function adjustRatio(img) { var winheight = (document.body.clientHeight === undefined)?window.innerHeight:document.body.clientHeight; var winwidth = (document.body.clientWidth === undefined)?window.innerWidth:document.body.clientWidth; winratio = winheight / winwidth; if(winratio <= imageratio) { img.style.height = '100%'; img.style.width = 'auto'; } else { img.style.width = '100%'; img.style.height = 'auto'; } } setTimeout("adjustRatio(img)",1); </script> </body> </html> Please let me know if it doesn't make any sense! Any reply would be amazing! Thanks Edd Quote Link to comment Share on other sites More sharing options...
Adam Posted July 27, 2010 Share Posted July 27, 2010 I can't seem to see anything in your code about two arrows? Perhaps a demo or screen shot may help. What I will add looking at the code though, setTimeout("adjustRatio(img)",1) - you're firing the time out every millisecond? That's a thousand times a second! You're already using the resize event, why do you need the time-out? Quote Link to comment Share on other sites More sharing options...
bigheadedd Posted July 28, 2010 Author Share Posted July 28, 2010 Hi, Thanks for replying. I've attached an image or where the arrows would be in relation to the page. They would need to always stay there, no matter how wide the page becomes etc. Thanks Edd [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
bigheadedd Posted August 2, 2010 Author Share Posted August 2, 2010 Hi guys, Still really stuck on this?! I've tried encapsulating the image within a div, but the scaling seems to focus only on the height, and not the width, so I can't just put right align. Really scratching my head on this, so any help would be massively appreciated! Thanks Edd Quote Link to comment Share on other sites More sharing options...
Adam Posted August 2, 2010 Share Posted August 2, 2010 Unfortunately you're not going to get this always flush to the edge of the image, because you're resizing based on the aspect ratio. That means whenever the screen is wider than the height, the div will be stretched wider than the image. You would need to use JS to work out the gap on the right and set a right margin on the arrows. Quote Link to comment Share on other sites More sharing options...
bigheadedd Posted August 3, 2010 Author Share Posted August 3, 2010 Hmm, I see what you mean there. I've also noticed that in Firefox, the rescale works fine when you scale on both the width and the height, but in Safari/Chrome, it only works when scaling with the width? I'm really not sure why this is? Thanks Edd Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.