Home/ Questions/Q 6183503
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:22:36+00:00

please have a look at the following code: (I removed all doctypes etc for

  • 0

please have a look at the following code: (I removed all doctypes etc for readability).

I guess the code is pretty self-explaining: The javascript code retrieves the height and width from the image below and creates two new variables (newHeight and newWidth) which are shrunk by 80% of the original values. When the document loads, those two new variables (newHeight and newWidth) should be assigned to the height and width attribute of the image, but this doesn’t happen.

Can somebody help me out?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

<script type="text/javascript">
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();

var imageresize = 80;
var newHeight = Math.round(height/100)*imageresize);
var newWidth = Math.round(width/100)*imageresize);
</script>

</head>
<body onload="document.getElementById('#fluidimage').style.width=newWidth; document.getElementById('#fluidimage').style.height=newHeight;"> 
    <img src="images/1.jpg" id="fluidimage" height="" width=""  />
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like the first two answers missed an opening brace at Math.Round
    Try this.

    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

        <script type="text/javascript">
            $(document).ready(function() {
                var imageresize = 0.8;
                var $image = $("#fluidimage");
                $image.css({
                    "width": Math.round($image.width() * imageresize),
                    "height": Math.round($image.height() * imageresize)
                });
            });
        </script>
    </head>
    <body> 
        <img id="fluidimage" src="images/1.jpg" />
    </body>
</html>

    Working Demo: http://jsfiddle.net/naveen/58GBd/

    Use screen.width for resizing according to screen.

    $(document).ready(function() {
    var imageresize = 0.0;
    var $image = $("#fluidimage");
    switch (screen.width) {
        case 1680:
            imageresize = 0.5;
            break;
        case 1280:
            imageresize = 0.4;
            break;
        case 1024:
            imageresize = 0.3;
            break;
        default:
            imageresize = 0.8;
            break;
    }
    $image.css({
        "width": Math.round($image.width() * imageresize),
        "height": Math.round($image.height() * imageresize)
    });
});

    Working Demo: http://jsfiddle.net/naveen/Xbe4v/

    • 0