Width depends of height

Question

Can u show me completed html code where it is some rectangle in it with "height=75% of my screen" and "widtht=4/3 of height". So, it should be 3:4 reсtangle where height depends of my screenheight, but width do not depends of my screenwidth. Only of screenheight.

i thought i understood previus time, but it was not so.

I have this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
    });
</script> 

And i dont know what to do with the width.

Answer 1

HTML doesn't dictate this. CSS can, but CSS doesn't have any direct internal math logic. So, what you need to do is use javascript.

When the page loads, grab the width of the object, do your math, and then set the height.

If you're new to JS, I'd suggest learning one of the libraries, such as jQuery. In jQuery, it'd look something like this:

$('#myDiv').width($(this).height()*.75);

Answer 2

You'll need JavaScript for computing the width, it's not possible to do this only with HTML.

The relevant property is window.innerHeight; multiply that by (3/4) to get height, and since (3/4)*(4/3) == 1, window.innerHeight is (incidentally) equal to your desired width.

Then set the element's .height and .width properties.

Note: I'm assuming that you wish to have a rectangle proportional to the browser window, not the user's screen. If you actually want the screen size, use window.screen.height instead of window.innerHeight; beware though: with widescreens and multi-monitor configurations on the rise, the browser may report quite outlandish dimensions.