Julia,
The following will operate on any block element given class="maintain_aspect_ratio" :
$(function(){
var $mar = $('.maintain_aspect_ratio');
$(window).resize(function(){
var $w = $(this);//or maybe $(document);
var $this, height_ratio, width_ratio;
$mar.each(function(){
$this = $(this);
width_ratio = $this.width() / $w.width();
height_ratio = $this.height() / $w.height();
if (height_ratio > width_ratio){
$this.width("auto");
$this.height('100%');
}
else{
$this.width('100%');
$this.height('auto');
}
});
});
});
I have neither tested not attempted to verify the algorithm. This is just a translation into jQuery of your sample function for an image.
If elements are to be dynamically given class="maintain_aspect_ratio" , then you will need to move the line var $mar = $('.maintain_aspect_ratio'); inside the resize handler (as its first line).Airshow
Airshow
WiFi Lounge Lizard
2,682 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
i found a script which works on the image, but i wish instead of image it uses div
<html>
<head>
<title>Image</title>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
else
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
}
</script>
<body onresize="resizeImage()">
<center><img onload="resizeImage()" margin="0" border="0" src="http://www.ozbv.com/uploads/Winnie-the-Pooh.jpg"></center>
</body>
</head>
</html>
I'm not sure as to why that example uses script, but my solution here might just happen to give you the idea.
[I used a similar to this technique to mimic stretchy background image fills when css was incapable of doing so]
<!doctype native>
<html>
<head>
<title>Fixed Aspect Ratio</title>
<style>
#cont
{
position: relative;
width: 80%;
margin: auto;
background: black;
}
#cont img
{
width: 80%;
margin: auto;
position: relative;
display: block;
}
#cnt
{
color: white;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
div p
{
padding:0 15px;
}
</style>
</head>
<body>
<div id=cont>
<div id=cnt><p> content: this behavior doesn't require scripting</div>
<img src=http://i42.tinypic.com/21e18cx.jpg>
</div>
</body>
</html>
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
why is it so important that this certain DIV preserves aspect ratio, does it hold an image or other type of graphics or other watchable content?
Any adequate solution depends on the content this div holds. So what is it?
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
well than you already have the solution waiton there for you to use it:
1. put your swf inside my div #cont; [replace the existing div #cnt with with it]
2. keep the existing id of that div
3. nothing else.
advanced:
Make a capture of some scene from your swf and save it for static display replacing the source of my image with it.
Clients who have flash disabled will at least see the picture of that content. Others will not see a blank box during file load etc.
The rest is cosmetics...
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
Yes, what TIII says about content.
The div may need to be styled with overflow:hidden to prevent its content pushing it out of shape.Airshow
Airshow
WiFi Lounge Lizard
2,682 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Troy III
Practically a Master Poster
609 posts since Jun 2008
Reputation Points: 120
Solved Threads: 80
