Calculate proportional width of object (proportion: 1600x1080)

Question

Hello,

this is a simple jquery question: when my div "#wrapper" has a specific height (=browser height - 129px), i want to set the width of a inner div "#object" automatically too (cause i need a width for the object to read it out)

°

example of the html:

<div id="wrapper">

 <div id="object"> </div>

</div>

---

example (jquery):

$("#wrapper").css({height:(($(window).height())-129)+'px'});
$("#object").css({width: [ CALCULATION ], height: ($("#wrapper").height())+'px'})

---

the original proportion of the image is: 1600x1080

here's the link to the attachment, take a look at it (tinypic): http://www.imgplace.com/...age1.png

additonal information:

the heights "500px", "600px" and "700px" you can see in the attachment are just examples, the heigth could also be "711px", "623px", "998px" etc.

´

my math skills aren't really good, would be great if someone could help me out

´

Kind Regards, Hans :-)

Answer 1

I think the calculation you want is Math.round($("#wrapper").height() * 1600 / 1080).

Answer 2

i've re-edited my post, sorry for my bad grammar :-)

Kind Regards,

Hans

Answer 3

You can use directly the jQuery.width and jQuery.height functions instead of the jQuery.css function. Also, you could define the div#object's height to 100% so you don't have to specifically set it...

$("#wrapper").height($(window).height()-129);
$("#object").width(Math.floor($("#wrapper").height() * 1600 / 1080))
            .height($("#wrapper").height());