Member Avatar for Julia25

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>
  • 3 Contributors
  • 7 Replies
  • 314 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for Julia25

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

Edited by Julia25 because: n/a
Member Avatar for Troy III

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

Edited by Troy III because: n/a
Member Avatar for Julia25

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

Member Avatar for Troy III

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

Member Avatar for Julia25

is this possible?

Member Avatar for Troy III

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.