www.webdeveloper.com
Results 1 to 3 of 3

Thread: automatically resize image to screen size

Threaded View

  1. #1
    Join Date
    Jun 2011
    Posts
    29

    automatically resize image to screen size

    hello,
    i have downloaded an image scrollpane which changes the background images. i want to make the images get resized automatically at screen size.. to do this i used this html line
    style="width:100%;height:100%;"
    but then i realised that this line wont work on my case because the scrollpane works a little bit differently.

    to be more specific, the scrollpane will use as background image the alt attribute of the img tag and for the thumbnails of the image it will use the src attribute of the img tag.
    HTML Code:
    <div class="wrapper thumbs_wrapper"> 
    		<div class="thumbs"> 
    			<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/> 
    			<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/> 
    		</div> 
    </div>
    so if i add this line here
    HTML Code:
    <img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
    there wont be any change to the background image but only to the thumbnail.. is there any way to resize the image from the alt attribute?

    i simply want to grab the img from the alt attribute and resize it with a javascript function and set the width and height to 100%.

    i have written this function but it doesn't work..

    Code:
    <script type="text/javascript">
    function resize()
    {
    	var element = document.getElementById('imgg');
    	var attr = element.getAttribute(alt);
    	attr.width = '100%';
    	attr.height = '100%';
    }
    </script>
    HTML Code:
    <img id="imgg" onload="resize()" src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" height='' width=''/>
    thank you in advance
    Last edited by telisjok; 06-10-2013 at 09:42 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles