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  8394 
*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: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
