Css width/height problem

jeff_zucker
jeff_zucker used Ask the Experts™
on
Here's my jsfiddle:
http://jsfiddle.net/a807gemg/

I want the image to automatically adjust to the width of the green box.
I want the green box to load at whatever height will accommodate the tallest picture.

How do I do this keeping in mind I'd like a responsive design.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

Commented:
Not entirely sure what you are trying to achieve - some rejigging of your css

http://jsfiddle.net/a807gemg/2/

*{
    box-sizing: border-box;
}
#coverslide >div {
    padding: 10px;
    width:100%;
    background-color:purple;
    height:auto;
}
#coverslide {
    height:auto;
    width:100%;
}
#coverslide img{
    width:100%
}

.green_box {
    height:auto;
    width: 400px;
    background-color:green;
    padding:0 20px;
}

Open in new window

Author

Commented:
That fixed the width problem, but now the slideshow itself is acting a little weird.  It pushes the old picture down (showing both pictures for a fraction of a second) before removing it and only showing the new picture being cycled in.
Expert of the Year 2014
Top Expert 2014
Commented:

Author

Commented:
Thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial