Overlap relative positioned images in CSS

Question

I made fading slideshow in CSS3. Now I must insert it in a div container in such a way that the slideshow has width 100% of the parent, and appropriate height. If it was a single image I can easily do this:

<img src='url' style='border: 4px solid #dedede; width: 100%; margin-bottom: 3%;' />";

But in order to work the slideshow needs all the images to overlap, and the only way I'm able to find out is to position those images absolute. When I do this, the div container no longer stretches around my images, so whatever I do I end up either with stretched image or with too big or too small container when resizing the page. The only workaround I see is to use like 10-15 media queries to resize my div's height for each page width and keep it's height slightly bigger than the slideshow. But aren't there better solutions, because that's a bad one.. And here's my slideshow code:

            .slide{position: relative;}
        .slide figure{
            border: 4px solid #dedede;
            margin: 0;
            position: absolute;
            opacity: 0;
            }
        .slide figure:nth-child(1) {animation: xfade 20s 0s infinite;}
        .slide figure:nth-child(2) {animation: xfade 20s 6s infinite;}
        .slide figure:nth-child(3) {animation: xfade2 20s 12s infinite;}
        @keyframes xfade{
            0%{opacity: 0;}
            10%{opacity: 1;}
            30%{opacity: 1;}
            40%{opacity: 0;}
            }
        @keyframes xfade2{
            0%{opacity: 0;}
            10%{opacity: 1;}
            40%{opacity: 1;}
            50%{opacity: 0;}
            }

Answer 1

After our comment discussion, you ended up with 5 possible solutions (none perfect unfortunately since they require processing):

1. Media queries (this may be the best and since you already know how to do it even better)
2. Js resize (get largest image size and set container dimensions, this would be nice, but on slower pcs the user may notice a fast "blink" from the resize)
3. PHP dimensions set: If you have php code before loading the page you can get the image sizes there, and use it to set dimensions of the container (this is the second best I guess - is what I would do)
4. Image "cut": Set a fixed height, then use overflow hidden to clip unwanted content
5. Set a standard and use only images of that size (this may not fit your needs).