Solved

Css width/height  problem

Posted on 2014-11-17
4
90 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
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
0
 

Author Closing Comment

by:jeff_zucker
Comment Utility
Thank you.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now