Solved

Css width/height  problem

Posted on 2014-11-17
4
97 Views
Last Modified: 2014-11-18
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.
0
Comment
Question by:jeff_zucker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40448872
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

0
 

Author Comment

by:jeff_zucker
ID: 40450071
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40450372
0
 

Author Closing Comment

by:jeff_zucker
ID: 40450448
Thank you.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question