I saw this script but wondering if this is possible using div instead of image
which maintains the ratio whether you adjust browser height or width

<!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>maintain height and width</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
var adjustSize = function(){
    var total = 0, // include extra width padding here
        win = $(window),
        winW = win.width(),
        // subtract scroll bar height to prevent vertical scrollbar
        winH = win.height() - 15;
    $('#container img').each(function(){
        var $t = $(this),
            r = $t.width()/$t.height(); // image aspect ratio
            // set image size, but maintain aspect ratio
            worh = (r > 1) ?
                { width : winW,  height: winW/r, maxHeight: winH, maxWidth: winH*r } :
                { height : winH, width : winH*r, maxWidth: winW, maxHeight: winW/r };
        $t.css(worh);
        // add up total width for body size
        total += $t.width();
    });
    $('body').width(total);
};

// run script after all the images have loaded & on window resize
$(window)
    .load(function(){ adjustSize(); })
    .resize(function(){ adjustSize(); });
</script>

<style type="text/css">
#container img {
	float: left;
}

/* pick a width number so that the images load horizontally instead of vertically */
body {
    width: 100%;
}
</style>
</head>

<body>

<div id="container">
    

    
<img src="http://images2.fanpop.com/image/photos/13700000/Chaplin-charlie-chaplin-13789434-1024-768.jpg" width="820" height="615" /></div>


</body>
</html>

Recommended Answers

All 7 Replies

yes but adjusting the browser height doesnt scale like the sample above

Forget about scripts - all script event solutions are jerky and ugly
These tasks are possible but they are all imperfect. Even though, a css solution if not perfect - it is at least smother.

I'm giving this solution away because..., because - you'll get a:

Super-fluid Layout [they say it's the most difficult type of layout ever. (That's the main reason there are less than 1% of the kind running out on internet).]

Table-free; using simple DIVs.
Fixed aspect ratio main content
Vertically and Horizontally centered

and a CSS1 (backward )compatible code (I should post it as a code snippet latter, or should have )

So here you are
See what you can do with it

<!doctype html>
<html>
<head>
<title>Super Stretchy</title>

    <style>
       *
	{
	  padding: 0; 
	  margin: 0;
	  vertical-align: middle;
	}
	#lefter, #righter, #inner, #inright, #indisplay
	{
	 display: inline-block; 
	}

	body, #body
	{
	  position: absolute;
	  height: 99.8%;
	  left: 15%;
	  width: 70%;
	  background: #ddd;
	  margin: 0 auto;
	}
	#lefter
	{
	  width: 20%;
	  height: 90%;
	  background: #444;
	}
	#righter
	{
	  width: 80%;
	  height: 90%;
	  background: #aaa;
	  text-align: center;
	}
	#inner
	{
	  width: 0%;
	  height: 100%;
	  background: #555;
	}
	#inright
	{
	  width: 80%;
	  height: 60%;
	  background: #555;
	  position: relative;
	}
	#head, #footer
	{
	  background: #777;
	  height: 5%;
	}
	#indisplay
	{
	  width: 90%;
	  background: yellow;
	  position: relative;
	}
	#cnt, .cnt
	{
	   color: white;
	   width: 100%;
	   height: 100%;
	   position: absolute;
	   z-index: 1;
	}
	#indisplay img
	{
	   width: 100%;
	   margin: auto;
	   position: relative;

	}
	p{background: navy; position: absolute; width:100%; left:0px;}
    </style>

<!--[if lte IE 7]>
<style>
	#lefter, #righter, #inner, #inright, #indisplay
	{
	 display: inline; 
	}
</style>
<![endif]-->

</head>
<body><!--[if lte IE 7]><div id=body><![endif]--><div id=head>head</div><div id=lefter>lefter</div><div id=righter>
<div id=inner></div><div id=inright>
<div id=inner></div>
<div id=indisplay>
<div class=cnt><p> content: this behavior doesn't require scripting</div>
<video class=cnt controls>
<source src=http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4>
<source src=http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.ogv>
<object class=cnt data=http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4>
<embed class=cnt src=http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4></object>
</video><img src=http://i42.tinypic.com/21e18cx.jpg></div></div></div><div id=footer>footer</div><!--[if lte IE 7]></div><![endif]--></body></html>

p.x: You will need to provide swf or flv for fallback sources on object and embed elements which are required for browsers that don't support HTML5

Thanks for taking time Troy
but its not scaling when i adjust the browser height

Sorry i didn't read your new request carefully.
But soon you will realize that it is impractical.

is this possible?

In theory, it is!
Empirically -it is not.

Because in the end you will realize that any possible solution will get to complicated, and the complexity will exponentially increase the fragility factor as the code maintainability will drop to zero.

Although, I still hope there is or might be (a true to the notion of the word) a >>simple<< solution to it.

The problem is that: as soon as you solve this step, you will see that something else is gone a stray.
The font size perhaps![?]

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.