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 do HTML/CSS form helpers/popover

    How to deselect a table's head and certain tds with css

    How to get rid of an automatically generated span via CSS (un-display)?

    Having an HTML table, how can I toggle between displaying only specific rows using HTML, CSS, and JavaScript [duplicate]

    How to partly color the border with css [closed]

    how to change the css of default select2 placeholder color?

    How to remap CSS shortcut key in Mac Bluefish text editor

    How to change background [closed]

    How to fill a rectange from center html , css

    how to change the CSS Class of the asp label dynamically based on its value

    How to change background color of my selector's Pseudo-element on rollover?

    How to make CSS 3 columns stay in their posisiton?

    How can I skin / theme a windows forms application [closed]

    How do I make this nested div to show up on top right corner and make text wrap around it?

    How to select html5 range's pseudo-elements in JavaScript

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    How to set the width of my table columns to a fixed value?

    How to detect a smartphone through JavaScript/CSS?

    How to add an icon to bottom right of textareas via CSS?

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How to read Base64 VLQ code?

    How to pull css attributes from

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How to CSS a two column list of items?

    how to bold words within a paragraph in HTML/CSS?

    How to detect clicks outside of a css modal? [duplicate]

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    How to change css for active link based on the hashtag

    How to add to css class in a single html tag? [duplicate]