Resize image in fluid layout

[gayathiribala]

Hi All,

I am facing problem, while placing images in fluid layout. I have tried with 'max-width' CSS property, but failed.

The image size remains same, when i resize the window or change the resolution. It exceeds my alloted space and overlaps with another div. I am currently working on 1920x1080 resolution.

My code below,

HTML:


<div id="maindiv">

<div id="leftdiv">
</div> <!-- End of leftdiv -->

<div id="middlediv">
<div id="headerdiv">
<table>
<tr>
<td>
<img id="headerlogo" src="./images/Logo_TeaKadai.png" alt="Tea Kadai"/>
</td>
<td> <!-- navigation menu comes here -->
</td>
</tr>
</table>
</div> <!-- End of headerdiv -->
<div id="contentdiv">
main content
</div> <!-- End of maincontent -->
<div id="footerdiv">
footer content
</div> <!-- End of footerdiv -->
</div> <!-- End of middlediv -->

<div id="rightdiv">
</div> <!-- End of rightdiv -->

* *</div> * * * * * * * * * * * * * * * ** * * * * * * * * * * * * * * <!-- End of maindiv --> *



CSS:


div #maindiv
{
font-family:Georgia;
font-size:14px;
}
div #leftdiv
{
float:left;
width:19.95%;
background-image:url('../images/Image06.jpg');
background-repeat:repeat;
height:100%;
}

div #middlediv
{
float:left;
width:60%;
height:100%;
}

div #rightdiv
{
float:left;
background-image:url('../images/Image06.jpg');
background-repeat:repeat;
width:19.95%;
height:100%;
}

div #headerdiv
{
height:10%;
}

div #contentdiv
{
background-color: #222;
height:80%;
}

div #footerdiv
{
background-color: #555;
height:10%;
}

#headerlogo
{
max-width:60%;
}


Kindly help me to solve this.

[gayathiribala]

Got it resolved by setting Width and height of the image to 100%. Now the image fits in all screen size.

Thanks

[auntnini]

Did that distort the aspect ratio?

I've been experimenting with % percentages. When my images are the same or similar aspect ratios, it works OK. But with a mixture of "landscape" and "portrait" and "square" images, I'm stuck. So I was wondering how 100% worked for you.

See for instance http://www.josephdenaro.com http://auntnini.webs.com http://oksenhendler.webs.com

[auntnini]

I have not figured this out yet, but here are some of my search results on ASPECT RATIO:

http://adeelejaz.com/blog/type/jquery-image-resize-plugin/


$.fn.resize=function(a){var d=Math.ceil;
if(a==null)a=200;var e=a,f=a;
$(this).each(function(){var b=$(this).height(),c=$(this).width();
if(b>c)f=d(c/b*a);else e=d(b/c*a);
$(this).css({height:e,width:f})})};

$("img").resize(200);

$("#thumbs img").resize(150);

=========================

http://nooshu.com/jquery-plug-in-scalable-background-image



The effect is a scalable background image; as you expand / contract the browser window the background image scales up and down with respectively. Unfortunately it isn’t possible to do using only CSS 2.1; it’s possible using CSS3 using the background-size property, though not yet widely supported. The technique doesn’t use a background image, it uses an absolutely positioned image to achieve the same effect; so it could be considered a hack. If you’re not sure what I mean, here’s a demo. It’s quite simple to use; here’s the basic HTML:
image id="imageID" src="images/our-image.jpg"
alt="Fake background image"
//Plug-in usage
jQuery(function($){
$("#container").backgroundScale({
imageSelector: "#imageID",
centerAlign: true,
containerPadding: 100
});
});

====================

http://stackoverflow.com/questions/2596594/jquery-window-width-and-window-height-return-different-values-when-vie


(all this is within $(document).ready())
//initially declare the variables to be visible to otehr functions within .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

windowWidth = $(window).width(); //retrieve current window width
windowHeight = $(window).height(); //retrieve current window height
documentWidth = $(document).width(); //retrieve current document width
documentHeight = $(document).height(); //retrieve current document height
vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()


================
P.S.:-- The BIG and obvious problem is how to meld the CSS % min-width and max-width style rules with jQuery/JavaScript aspect ratio scripts.

[canuto120]

#example
}
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}