0

Is there a script that when div resize(browser) it will maintain aspect ratio?
ive tried using css which adjust the width through min-max but wish to maintain the aspect ratio (height)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



<style type="text/css">


html, body
{
   margin: 0;
   padding: 0;
}

body
{
    position: relative;
    min-height: 900px;
    background-color: #C6C6AE;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana;
}

#head 
{
	height: 10%;    
}

#container
{
	top: 20px;
	left: 0;
	right: 0;
	min-width: 300px;
	max-width: 750px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	background-color: #F39;
	width: auto;
	border: thick solid #036;
}

</style>
</head>

<body>


<div id="head"></div>

<div id="container">







</div>
</body>
</html>
5
Contributors
17
Replies
19
Views
5 Years
Discussion Span
Last Post by Julia25
0

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>
0

You have the logic, you just need to get the divs instead of the images. To do that use: document.getElementsByTagName("div").

And don't forget to loop throw the array, cause in your code you are justing change the image indexed at 0.

0

hello ale!
can you help me with this one? I dont have knowledge of scripting :(
my div is 750px x 500

Edited by Julia25: n/a

0

Is only one div that you want to resize? What do you want to do with it?

Edited by AleMonteiro: n/a

0

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

0

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.

<!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>
0

@Ale yes i just one div #content to resize according to the browser size the div has a max width and min width which i hope the height will adjust according thus maintaining the aspect ratio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">

    * {
    margin: 0;
    }
    html, body {
	height: 100%;
	background-color: #CFF;
    }
    .wrapper {
    min-height: 100%;
    height: auto;
    height: 100%;
    margin: 0 auto -4em;
    }
    .footer{
	height: 4em;
	background-color: #FCF;
    }
	.push {
    height: 4em;
    }
#content {
	position:absolute;
	top: 50%;
	left: 50%;
	width:750px;
	height:500px;
	margin-top: -275px;
	margin-left: -375px;
	background-color: #000;
	color: #666;
}
 </style>
 </head>
        <body>
            <div class="wrapper">
                
                <div id="content">my_content</div>
                
                
                
                
                
<div class="push"></div>
            </div>
            <div class="footer">
              <p>footer</p>
            </div>
        </body>
    </html>

@airshow
cant get it to work :(

0

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?

0

yes planning to put swf file in it, though having this script to work will have some benefit in some projects

0

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...

0

i think i have to play with swf parameters
still playing with it

0

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

0

This code (including the previous one)is authentic HTML5 and it supports video.
So we will be using one.

You will need at least two source files and types. One on mp4 format and the other on flv or whatever flash or shock-wave plugin uses (I wasn't able to find for this demo) so, for a fallback code I've set a completely different file and source, namely from YouTube.

<!doctype html>
<html>
<head>
<title>Fixed Aspect Ratio</title>

    <style>
	#container
	{
	   position: relative;
	   min-width: 300px;
	   max-width: 750px;
	   margin: auto;
	}

	#container img
	{
	   width: 100%;
	   margin: auto;
	   position: relative;
	   display: block;
	}

	.content
	{
	   width: 100%;
	   height: 100%; /*optional in case the poster image has exact aspect ratio*/
	   position: absolute;
	   z-index: 1;
	}
    </style>

</head>
<body>
<div id=container>
   <video class=content controls autobuffer poster=http://i42.tinypic.com/21e18cx.jpg>
     <source src=http://www.kaltura.com/p/243342/sp/24334200/playManifest/entryId/0_c0r624gh/flavorId/0_w3aolq8p/format/url/protocol/http/a.mp4>
     <object class=content>
	<param name=movie value=http://www.youtube.com/v/66TuSJo4dZM?version=3&feature=player_detailpage>
	<param name=allowFullScreen value=true>
      <embed class=content
	src=http://www.youtube.com/v/66TuSJo4dZM?version=3&feature=player_detailpage 
	type="application/x-shockwave-flash" 
	allowfullscreen=true>
     </object>
   </video> <img src=http://i42.tinypic.com/21e18cx.jpg> 
</div>
</body>
</html>

for real old time browsers which don't support the min/max sizing you are using here, -some further tweaks are necessary. But right now there's no need for that.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.