0

I'm trying to scale an image's height to its width. The problem is that the width scales with the user's window size (everything is % size and inherits), and there is no height to inherit, as the height is dependent on the content. I can set a height, but that defeats the purpose of scaling the entire site to fit any window size.

I'd like the height of the images and the Slideshow element to scale to 75% of the width of the slideshow element and/or images.

**

Here's a Fiddle link: http://jsfiddle.net/eleventhend/t8Udg/

**

This seemed to be the most relevant response I could find, but I can't get it to work with mine. I don't really know Java, so the problem may be my implementation.

CSS scale height to match width - possibly with a formfactor

EDIT: SOLVED!

I figured out a workaround. Here it is:

#preset {
margin: 50px auto;
height: 0px;
padding-bottom: 60%; /* proportional scaling */
position:relative;
width: 90%;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

#slideshow { 
margin: 50px auto; 
position: relative; 
width: 100%;
height: 100%;
padding-bottom: 0px; 
}

Then, open a div preset, followed by the div slideshow. Worked like a charm!

Community
  • 1
  • 1
eleventhend
  • 296
  • 3
  • 17
  • 1
    Did you know that you can show us working examples of CSS/HTML/JavaScript webpages? http://jsfiddle.net/ is what a lot of people on SO use for such questions. – john_science Jan 31 '13 at 20:43
  • 1
    Thanks Jolly, I'm putting it into that right now. Link: http://jsfiddle.net/eleventhend/t8Udg/ – eleventhend Jan 31 '13 at 20:54

0 Answers0