Keeping aspect ratio of <div>

Hi all,
is it possible to say "I'd like a <div> with width:100% and an aspect
ratio of height/width=2/3" in a way that browsers understand?

Thanks for hints,
Martin

Martin Plotz wrote:

Hi all,
is it possible to say "I'd like a <div> with width:100% and an aspect
ratio of height/width=2/3" in a way that browsers understand?

Thanks for hints,
Martin

Martin,

Using javascript, you could determine the size of the view port and then
set height and width to a computation based on those results.

Here is one of many links that may assist you with the javascript end of
things. Be warned however, some of us have javascript turned off, so
you need a fall back for us.

http://andylangton.co.uk/articles/ja...ze-javascript/

Carolyn

On 2008-02-04, Martin Plotz <martinplotz (AT) yahoo (DOT) de> wrote:

Hi all,
is it possible to say "I'd like a <div> with width:100% and an aspect
ratio of height/width=2/3" in a way that browsers understand?

The suggestion below should work in modern browsers, not tested in IE.

You first need to create a little transparent image called 23.png (or
whatever you like) that's 3px x 2px.

.aspect23
{
border: 1px solid black;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}

...

<div style="position: relative">
<img src="23.png" style="display: block; width: 100%">
<div class="aspect23">
Hello
</div>
</div>

I've put that relatively positioned div in-- but you just need to add
position: relative to whichever block you want this special 2/3 div in.