www.webdeveloper.com
Results 1 to 3 of 3

Thread: automatically resize image to screen size

  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.

  2. #2
    Join Date
    Jun 2013
    Posts
    17
    -Use the body tag.
    -Adapt it if you use a div # body or another.
    -To adjust the page size, use this CSS code:
    body{width:100%;}

    With this code the page will take 100% of the window, regardless of its size.
    Or you can set the width you want - e.g. 90% or 80%
    If you define a smaller width, you can focus with "margin: auto".

    Example:-

    A page width of 90%, centred, with a minimum width of 600 pixels and a maximum width of 2000 pixels:

    body{width:90%;margin:auto;min-width:600px;max-width:2000p

  3. #3
    Join Date
    Apr 2013
    Posts
    26
    If you wanna save these complicated steps and find a easy way, you can google imaging sdk and you will find many useful tools, or google how to resize image to get instructive articles. Good luck I think image processing programmes can enable to quickly resize pictures . i have use imaging sdk which can original layouts hyperlinks, Images and tables retained in word ,text, image, Epub, html.but i forgot download the wedsite ,go to google. By the way , pay attention to your system platform, select the suitable one . I use an imaging sdk driver found on the internet . Install it and it becomes a selectable processing option.Then you can resize your image in any program at all, including Adobe Acrobat .zoom in or zoom out on your own will. Just open the images, select resize ,and follow the setps given in the sdk, the task will be finished in several seconds. if you haven't found a good choice , you can have a try. best wishes.

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