Maintain aspect ratio on div

Question

Julia25 0 Light Poster

12 Years Ago

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>

javascript

5 Contributors
17 Replies
395 Views
3 Days Discussion Span
Latest Post 12 Years Ago Latest Post by Julia25

stbuchok

12 Years Ago

I think the only way to do this is through JavaScript.

AleMonteiro 238 Can I pick my title?

12 Years Ago

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.

AleMonteiro 238 Can I pick my title?

12 Years Ago

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

Edited 12 Years Ago by AleMonteiro because: n/a

Airshow 416 WiFi Lounge Lizard

12 Years Ago

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

Troy III 272 Posting Pro

12 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Julia25 0 Light Poster · Answer 1 · 2012-01-11T01:23:59+00:00

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>

Julia25 0 Light Poster · Answer 2 · 2012-01-11T05:09:15+00:00

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

Julia25 0 Light Poster · Answer 3 · 2012-01-11T21:08:33+00:00

@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 :(

Troy III 272 Posting Pro · Answer 4 · 2012-01-11T21:57:41+00:00

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?

Julia25 0 Light Poster · Answer 5 · 2012-01-11T22:05:49+00:00

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

Troy III 272 Posting Pro · Answer 6 · 2012-01-11T22:40:43+00:00

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

Julia25 0 Light Poster · Answer 7 · 2012-01-11T23:14:36+00:00

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

Julia25 0 Light Poster · Answer 8 · 2012-01-11T23:27:45+00:00

Julia25 0 Light Poster

12 Years Ago

heres a sample of swf

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 9 · 2012-01-12T00:53:28+00:00

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

Julia25 0 Light Poster · Answer 10 · 2012-01-12T02:22:42+00:00

Julia25 0 Light Poster

12 Years Ago

cant get this right :(

Troy III 272 Posting Pro · Answer 11 · 2012-01-12T04:37:03+00:00

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.

Julia25 0 Light Poster · Answer 12 · 2012-01-13T04:34:57+00:00

Julia25 0 Light Poster

12 Years Ago

great! Thanks a lot!