Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Fit Image(s) in a liquid Parent

Fit Image(s) in a liquid Parent

Problem

I am trying to present an Image Slider in a liquid layout (parent) and I do not like to limit the height and with of the images while they can be requested by big screen monitors (27") to smalls one like 11" or even less. Can you please let me know if there is plugin to help me to fix this issue? Right now I am using a slider(plugin - Nivo) which has a fixed layout and I am not able to change it to liquid Here is the Code which I have: HTML

 
 
 
 GALLERY

CSS

 * {
    margin: 0;
    padding: 0;
    }
 html{
    height:100%;
    width: 100%;
   }
 body {
  background-color: #272321;
  height:100%;
  width: 100%; 
  }
 #row_1 {
  position:relative;
  height:15%;
  width: 100%;
 }
 #row_2{
   position:relative;
   height:77%;
   width: 100%;
  }
  #row_3{
   position:relative;
   height:8%;
   width: 100%;
   background-color: #151110; 
   }
  .container{
   position:relative;
   margin: 0 auto;
   height:100%;
   width: 80%;
  }

Do you think if it is a good idea that I use several layouts for different screen size? Is there any way to fix this things with Jquery?

Problem courtesy of: Behseini

Solution

I don't know about pre-canned plug-ins, but it's not much of your own code to handle this.

You can attach an event handler to window resize, check the size of your container div and use your own javascript to select new image sizes for the slideshow based on the new container size.

Using a slight delay to prevent the code running hundreds of times during a resize, it could look like this:

(function() {
    var pauseTimer;

    $(window).resize(function() {
        // clear any previous timer running
        if (pauseTimer) {
            clearTimeout(pauseTimer);
        }
        // set new timer
        pauseTimer = setTimeout(function() {
            // user finished or paused resizing, 
            // so now we can recalculate slideshow size
            pauseTimer = null;
            // examine the size of your container div
            // select a new size image for your slideshow and load those images here
        }, 500);
    })
})();

Here's a demo: http://jsfiddle.net/jfriend00/Tucf2/

Solution courtesy of: jfriend00

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Fit Image(s) in a liquid Parent

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×