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  8418 
*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.slu rp.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.slu rp.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? couldn't quite figure it
out.
--
Ron Vecchi
|
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 ratio
* Provide white (or other color) borders at the sides or the top/bottom
The last point would be used to allow users to resize the panel to any ratio
|
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
(height) x 780 (wide)
So the "preferred size" would be 440 x 780
|
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 single image (see below) but don't have a
clue how to apply the same approach in a datalist, perhaps with a custom
databinding expression (or what?).
I would also prefer not displaying the image if it's blank so being able to
| | |
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 the controls resize and text also resizes to
keep the aspect ratio. In my current form (VB.Net 2005) when I stretch a
form the controls which are docked will resize with the form, but the text
stays the same size.
Is there a way to make a...
|
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 is convenient for resizing a form for
different screen resolutions.
I can't see how to do this /control this in .Net (VS2005). I have a user
that uses 800x600 resolution, and my apps appear very large on this user's
workstation. How can I...
|
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 frame due to differnt aspect ratio.
Some graphic designer suggests me to keep the aspect ratio of the original
graphic and pad the graphic with empty space to fit into the frame. One
example, the fixed frame is 100x60 and the image is 120x120, I...
|
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 = new PrintDocument();
doc.PrintPage += this.Doc_PrintPage;
PrintDialog dlgSettings = new PrintDialog();
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
