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> 7  8359 
*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
> 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
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
*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
> 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
"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.
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ron Vecchi |
last post by:
I know the math I need to perform on width and height to keep an aspect
ratio but where and how would I implement keeping a set aspect ratio on a
form when a user resizes it. Override OnResize?...
|
by: Arthur Hsu |
last post by:
Hello,
I have an ImageButton that refers to an external image. How can I keep that
image's aspect ratio when I set the ImageButton's size to 120x120?
TIA,
Arthur
|
by: Carl Gilbert |
last post by:
Hi
I am looking for either a component or technique to allow me to do the
following:
* Provide a panel with a background image
* Resize the image to best fit the panel to maintain aspect...
|
by: Farce Milverk |
last post by:
Hi,
I'm looking for an algorithm to resize an image of arbitrary size to a
"fixed" / required width and height.
For example, my application requires that images be no larger than 440 pixel...
|
by: mharness |
last post by:
Hello All,
Does anyone know how to dynamically change the width and height properties
of an image in a datalist in order to maintain the original aspect ratio?
I've managed to do this with a...
|
by: =?Utf-8?B?UmljaA==?= |
last post by:
Greetings,
Is there a property or method or any code for controlling the aspect ratio
of a form(s)? Example: In Java if you create a form with Panels... when you
stretch/resize the form, all...
|
by: =?Utf-8?B?UmljaA==?= |
last post by:
Hello,
If I create a form in Java with controls like Panels, textboxes... when I
stretch/shrink the form, all the controls can grow/shrink - along with the
text contained in the textboxes. This...
|
by: Danny Ni |
last post by:
Hi,
I am looking for a way to display images with different aspect ratio into
frames with fixed width and height, the problem is some images will look
distorted if they are forced into fixed...
|
by: alag20 |
last post by:
Hi,
How can I print an while preserving its aspect ratio. Currently I am using the code below.
private void PrintClicked(object sender, EventArgs e)
{
PrintDocument doc =...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM)
The start time is equivalent to 19:00 (7PM) in Central...
|
by: erikbower65 |
last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps:
1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal.
2. Connect to...
|
by: linyimin |
last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
|
by: erikbower65 |
last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA:
1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
|
by: Taofi |
last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same
This are my field names
ID, Budgeted, Actual, Status and Differences
...
|
by: DJRhino1175 |
last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this -
If...
|
by: Rina0 |
last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
|
by: DJRhino |
last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer)
If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _
310030356 Or 310030359 Or 310030362 Or...
|
by: lllomh |
last post by:
Define the method first
this.state = {
buttonBackgroundColor: 'green',
isBlinking: false, // A new status is added to identify whether the button is blinking or not
}
autoStart=()=>{
| |
