Using JQuery / javascript to create a dynamic image: what am I doing wrong?

问题

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>

回答1:

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/

回答2:

You need to wait for the whole document to load (pictures load last), so that the images will have a detectable size.

This code should work:

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

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

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

        $("#fluidimage").width (newWidth).height (newHeight);
    } );
</script>

</head>
<body> 
    <img src="images/1.jpg" id="fluidimage" />
</body>
</html>

See it in action at jsFiddle.

Note that the math needs to take place before the rounding.

Also, jQuery allows you to "simplify" the JS to:

$(window).load ( function () {

    function resizer (index, measurement) {
        var imageresize = 80;
        this.wCall = (typeof this.wCall == "null") ? true : this.wCall ^ true;
        return this.wCall ? Math.round (measurement * imageresize / 100) : measurement;
    }
    $("#fluidimage").width (resizer).height (resizer);
} );

See that in action at jsFiddle.

回答3:

You should wait for the page to be loaded before you calculcate the widht/height. 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">
    function() setImageDimensions{

      var width = $("#fluidimage").width();
      var height = $("#fluidimage").height();

      var imageresize = 80;
      document.getElementById('#fluidimage').style.width= Math.round(width/100)*imageresize);       
      document.getElementById('#fluidimage').style.height=Math.round(height/100)*imageresize;

    }
    </script>

    </head>
    <body onload="setImageDimenstions();"> 
        <img src="images/1.jpg" id="fluidimage" height="" width=""  />
    </body>

</html>

来源：https://stackoverflow.com/questions/6801102/using-jquery-javascript-to-create-a-dynamic-image-what-am-i-doing-wrong

标签

javascript

jquery

html

image-scaling