Using JQuery / javascript to create a dynamic image: what am I doing wrong?_问答_开发者

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

开发者 https://www.devze.com 2023-03-22 16:10 出处：网络

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 b

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('#fluidima开发者_开发问答ge').style.width=newWidth; document.getElementById('#fluidimage').style.height=newHeight;"> 
    <img src="images/1.jpg" id="fluidimage" height="" width=""  />
</body>
</html>

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.

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/

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>