CODEWITHSUNDEEP
jquerymathwidth
Hans Stauden
Hans Stauden

Reputation: 1

Calculate proportional width of object (proportion: 1600x1080)

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 :-)

Upvotes: 0

Views: 1316

Answers (2)

kkyy
kkyy

Reputation: 12460

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());

Upvotes: 0

Isaac
Isaac

Reputation: 10834

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

Upvotes: 1

Related Questions