467,912 Members | 1,694 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,912 developers. It's quick & easy.

Locking the Aspect Ratio of a Container

Is it possible to lock the aspect ratio of container using CSS?

For example, have a <div> that is resized according to the size of the
browser window, but remains square, regardless of it's size.

In the sample code that follows, I have set the width and height of the
<div> to be 75%, however the height of the height does not vary with the
size of the content window. If it did vary, it probably wouldn't give
the desired results because it would probably be 75% of height of the
window.

So, is it possible to tie the height of a container to the width of the
window?

Thank you,

Don

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
* {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

..content {
margin: 12.5%;
width: 75%;
min-width: 100px;
height: 75%;
min-height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="content">
text
</div>
</body>
</html>
Jul 21 '05 #1
  • viewed: 8082
Share:
7 Replies
*Don G* <ma******@yahoo.com>:

So, is it possible to tie the height of a container to the width of the
window?


No, not with CSS (including current drats of level three AFAIK). It's
possible with a scripting language and the DOM, though. Some browsers
(i.e. IE) support a proprietary way to access the DOM from within CSS
('expression'), when scripting is enabled.

By the way, the technical correct term is "box" not "container" and by
"window" you mean "viewport".

--
"If you never fall, you dance in constant fear of falling."
Suzanne Farrell
Jul 21 '05 #2
> No, not with CSS (including current drats of level three AFAIK).

Bummer.
It's possible with a scripting language and the DOM, though. Some browsers
(i.e. IE) support a proprietary way to access the DOM from within CSS
('expression'), when scripting is enabled.
Hmm, no, I don't think it will be worth it for what I am doing.
By the way, the technical correct term is "box" not "container" and by
"window" you mean "viewport".


Ah, thank you. My web publishing technical jargon is lacking.

Thank you for your reply,

Don
Jul 21 '05 #3
So, should 'height: 75%' actually do anything? I checked the sample
code I posted before in FireFox, IE, and Opera, and it didn't do
anything. Does the height attribute only work with a fixed dimension?

Thanks,

Don
Jul 21 '05 #4
*Don G* <ma******@yahoo.com>:

So, should 'height: 75%' actually do anything?
Sure.
I checked the sample code (...) and it didn't do anything.
Sure.
Does the height attribute only work with a fixed dimension?


No, but if percentual there has to be some calculatable height it can
refer to. The boxes of 'html' and 'body' (usually) grow with the contents,
so you have a circular dependency here. The viewport OTOH has usually a
fixed size. You can set 'html' and 'body' to its height with:

html, body {height: 100%}

See also <http://www.w3.org/TR/CSS21/visudet.html>, which has:

: A percentage height on the root element is relative to the viewport.

That sentence is not in CSS*2.0.

The terminology lection this time: by "attribute" you mean "property".

--
"Some people say I am a terrible person,
I'm not, I have the heart of a young boy,
in a jar, on my desk."
Stephen King
Jul 21 '05 #5
> No, but if percentual there has to be some calculatable height it can
refer to. ... You can set 'html' and 'body' to its height with:

html, body {height: 100%}
I thought this might be the case, and I tried it earlier with no
success. I just tried it again, and it worked, so I must have made a
type before.
The terminology lection this time: by "attribute" you mean "property".


I don't suppose you have a link to a glossary for me to look at?

Thanks again,

Don
Jul 21 '05 #6

"Don G" <ma******@yahoo.com> wrote in message
news:42**********@newsfeed.slurp.net...
No, but if percentual there has to be some calculatable height it can
refer to. ... You can set 'html' and 'body' to its height with:

html, body {height: 100%}


I thought this might be the case, and I tried it earlier with no
success. I just tried it again, and it worked, so I must have made a
type before.
The terminology lection this time: by "attribute" you mean "property".


I don't suppose you have a link to a glossary for me to look at?

Thanks again,

Don


I've never used percentages on heights, due to the need for liquidity. Table
rows+columns always stayed uniform height, while rows of divs do not.
Someone said to put each row of divs into a container div, at 100% width.
I'm having same or similar scenero problems, things wrapping and throwing
the whole page off, in the post titled "3column problem liquidity wraps",
above.

Good Luck
M.E.


Jul 21 '05 #7
theo wrote:
"Don G" <ma******@yahoo.com> wrote in message
news:42**********@newsfeed.slurp.net...
No, but if percentual there has to be some calculatable height it can
refer to. ... You can set 'html' and 'body' to its height with:

html, body {height: 100%}


I thought this might be the case, and I tried it earlier with no
success. I just tried it again, and it worked, so I must have made a
type before.

The terminology lection this time: by "attribute" you mean "property".


I don't suppose you have a link to a glossary for me to look at?

Thanks again,

Don

I've never used percentages on heights, due to the need for liquidity. Table
rows+columns always stayed uniform height, while rows of divs do not.
Someone said to put each row of divs into a container div, at 100% width.
I'm having same or similar scenero problems, things wrapping and throwing
the whole page off, in the post titled "3column problem liquidity wraps",
above.

Good Luck
M.E.

How does using percentages on heights diminish liquidity? I'd think it
would improve it, if anything.

--RC
Jul 21 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Ron Vecchi | last post: by
2 posts views Thread by Carl Gilbert | last post: by
reply views Thread by mharness | last post: by
reply views Thread by =?Utf-8?B?UmljaA==?= | last post: by
3 posts views Thread by Danny Ni | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.