www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help with Image resizing to fit image in Cell

  1. #1
    Join Date
    Mar 2010
    Posts
    18

    Help with Image resizing to fit image in Cell

    Hi im trying to resize an image to fit it in a cell in my table which is a fixed width and height. The images im using have varying sizes some are more tall than wide and some are more wide than tall .

    So im using this javascript code that i have got from somewhere on the net ( cant mind where now) that should hopefully resize the image keeping the aspect ratio but the code is not resizing the image .

    Does anyone know what i am doing wrong

    my page for example is on www.climbthemunros.co.uk/mountain_page.htm and if you click the text "previous" or "next" you will see what i mean

    Thnaks
    Fraser

  2. #2
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    You might like to try working with the code 'bigimage.js' found here. It may give you some idea about what to do.

    However, you should make sure that you are doing this with validated HTML. When people correct their HTML so that it is strictly valid, they often find many problems go away, without touching script at all. For the best results, you should validate as Strict HTML (and also validate CSS, which you should be using). Do not use deprecated markup whatsoever. Once you have validated HTML and CSS, then you can correct scripting problems affecting document structure and style.

  3. #3
    Join Date
    Mar 2010
    Posts
    18
    Hi, I have stripped out the actual bit of the code and put it on www.climbthemunros.co.uk/test_page.htm

    I think that my code is 95% there theres just something im missing or getting wrong I dont really know much about javascript so im just lookign to see if anyone that does could have a quick look see what im doing wrong

    thanks

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 2</title>
    <script type="text/javascript">
    
    
    function bigpic(file)
    {
    
        var main = document.getElementById("MAINPIX");
        main.style.visibility = "hidden";
        main.style.height = "auto";
        main.style.width = "auto";
        main.src = (file)
        
    }
    
    
    function fixSize(image)
    {
    
    
        var w = image.width * 2;
        var h = image.height * 2;
    
        if ( w > 395 )
        {
    
             h = Math.floor( h * 395 / w );
             w = 395;
        }
    
        if ( h > 286 )
        {
             w = Math.floor( w * 286 / h );
             h = 286;
        }
        image.width = w;
        image.height = h;
       image.style.left = Math.floor( (395 - w ) / 2 ) + "px";
        image.style.top = Math.floor( (286 - h ) / 2 ) + "px";
        image.style.visibility = "visible";
    }
    </script>
    </head>
    
    <body>
    
    <table border="0" width="400" cellspacing="0" cellpadding="0">
    	<tr>
    		<td height="286" width="400" bgcolor="#FFFFFF" align="center">
    		<font size="2" face="Arial">
    		<table width="395">
    			<tr>
    				<td align="center" width="395" height="286"><center>
    				<div style="position: relative; height: 280px; width: 395px; overflow: hidden">
    					<img id="MAINPIX" style="position: absolute;" onload="fixSize(this);" />
    				</div>
    				</center></td>
    			</tr>
    			<tr>
    				<td align="center" width="395" height="4"></td>
    			</tr>
    		</table>
    		</font></td>
    	</tr>
    	<tr>
    		<td height="30" bgcolor="#FFFFFF" align="center" background="http://www.climbthemunros.co.uk/button-bar.png">
    		<table cellspacing="0" cellpadding="0" width="100%" height="30">
    			<tr>
    				<td width="25%"></td>
    				<td width="25%" style="cursor:hand" onclick="bigpic('http://www.climbthemunros.co.uk/test3.jpg');">
    				<p align="center"><b>
    				<font face="Arial" size="1" color="#FFFFFF">&lt; PREVIOUS</font></b>
    				</p>
    				</td>
    				<td width="25%" style="cursor:hand" onclick="bigpic('http://www.climbthemunros.co.uk/test4.jpg');">
    				<p align="center"><b>
    				<font face="Arial" size="1" color="#FFFFFF">NEXT &gt;</font></b></p>
    				</td>
    				<td width="25%">&nbsp;</td>
    			</tr>
    		</table>
    		</td>
    	</tr>
    </table>

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