How to make a div with multiple images responsive?

Question

i'm doing a slider and my idea is making a div, and put inside the 4 images. Images will stack one above the other (with position: absolute), and will have width: 1013px, max-width: 100%, height: auto(to be responsive). The problem is that, if a don't give the parent div a height, i can't hide the overflow, but if i do, when the screen is small, the height will be the same, so you can see for example, the half of the second image.

I made this fiddle for you to understand:

http://jsfiddle.net/bS69a/

And my code:

html

<div class="slider">
    <img src="http://k40.kn3.net/4/2/2/9/D/8/593.jpg" alt="slider" />
    <img src="http://k32.kn3.net/1/0/C/9/6/1/D4F.jpg" alt="slider" />
</div>

css

.slider{
    margin: auto;
    width: 90%;
    text-align: center;
}

.slider img{
    width: 100%;
    max-width: 600px;
}

Answer 1

media queries and breakpoints might help.

Bootstraps Commonly used breakpoints: Bootstrap 3 breakpoints and media queries

Rought example below or live example link: http://jsfiddle.net/bA7wx/ (resize example window on jsfiddle example)

html

<div class="slider">
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
    <img src="#url" alt="slider" />
</div>

css

.slider{
    width; 100%
    height: auto;
}

.slider img{
    width: 24%;
}

@media (max-width: 992px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 768px) {
    .slider img{
        width: 48%;
    }
}

@media (max-width: 480px) {
    .slider img{
        width: 90%;
        margin; 0 auto;
    }
}

Answer 2

If what you're after is a containing <div> that always adjusts to the screen size of the current visiting device, you could use availHeight and $( window ).resize() like so:

$( window ).resize(function() {
    var screenHeight = window.innerHeight;
    $('#yourdiv').css('height', screenHeight); 
});