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/jquer...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-sca...ckground-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/2...alues-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%;
}