CSS / Jquery How to auto-size containers and images


Tags: javascript,jquery,html,css

Problem :

I am having trouble with getting a particular jQuery library (Windy Slider) to auto-size. I have uploaded the code into CodePen which can be found here http://codepen.io/zyoung0206/pen/rLmXbV

The problem I am having is that, when you click the wireframe & mockups blue circle button, a window should popup with a image slider inside it. These container codes are:

.windy-demo {
    /*width: 1024px;*/
    width: 60%;
    margin: 40px auto;
    color: #aaa;
}

.windy-demo ul.wi-container {
/*  width: 1044px;
    height: 788px;*/
    width: 60%;
    height: 80%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

which can be found on top of the CSS portion of the CodePen. What I am accomplish is to make these containers 60% width of the screen, and if the image inside is too big (let's say, the container is 800px width but image is 1024px), then the image to resize to fit inside the container.

I have tried manually setting the width of the containers (which resulted in fixed pixels of window size) and then tried setting it as width: 60%, but it is not working out well for the images that are larger than the container.



Solution :

I think img { width: 100%; height: auto; } will do it. I have just played around with your fiddle and as far as I can see, this should work. I have just updated my answer, these are the first lines of CSS that worked for me, rebuilding your example locally:

   .windy-demo {
        width: 60%;
        margin: 40px auto;
        color: #aaa;
    }

    .windy-demo ul.wi-container {
        padding: 0;
        margin: 0;

        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    .windy-demo ul.wi-container li {
        display: block; /* Make list items to block in order to stretch 100% */
        overflow-y: hidden; /* Hides the scroll bar y-axis */
    }
    .windy-demo ul.wi-container li img {
        width: 100%; /* makes the image fit 100% of available space */
        height: auto;
    }
    .windy-demo h4 {
        padding: 0 10px;
        line-height: 26px;
        margin: 0;
    }
    .windy-demo ul.wi-container li {
        padding: 0;
        border: 10px solid #fff;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #slider ......

    CSS Howto..

    How to avoid with css when background of the second line covers the letters of the first line?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    how to place div next to centered div css

    How do I detect that facebook app is loading page to change CSS?

    how to choose correct css class to change element

    How to change the font size in table cells according to cells content?

    How to prevent an element to get pushed down by window resize?

    How to convert css into bss

    How do I make numbered paragraphs (HTML5/CSS3)

    How to vertically center text with CSS?

    How to add vertical scrollbar to sliding tab? [closed]

    How to load an image with css using Django

    How to push floated element to below another floated element?

    Ruby on rails dropdown