asked on 11/18/2014

Css width/height problem

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.

CSS jQuery

Last Comment

jeff_zucker

11/18/2014

Gary

11/18/2014

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

jeff_zucker

11/18/2014

ASKER

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.

ASKER CERTIFIED SOLUTION

Gary

11/18/2014

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

jeff_zucker

11/18/2014

ASKER

Thank you.