1

I'm working on making a div scale with a window resize, and I need to have the height stay at 100% but the width scale proportionally (4:3). I saw this excellent post, which is a great example for adjusting height against a width, but not the other way around, nor can I find any posts that discuss that.

Following those instructions, I have an inner div that scales correctly height-wise based on the css of an outer div: 

#outer {
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  background-color: gray;
  margin-left: auto;
  margin-right: auto;
}

#inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}

Is there an easy way to switch it so that the height stays at 100% and the width scales proportionally? I've tried tweaking 'width', 'height' and 'padding' values but can't seem to get it. Thanks!

EDIT: I added a jsfiddle that has a div scaling proportionally by width. You'll see the green box scale with the size of the window, and the height scales proportionally. I'm hoping to get the green box to scale its height with the window, and then scale its width proportionally.

Community
  • 1
  • 1
shrug
  • 191
  • 1
  • 8
  • Possible duplicate http://stackoverflow.com/questions/8894506/can-i-scale-a-div-height-proportionally-to-width-of-the-div-with-the-help-of-onl – Madmenyo Jan 31 '14 at 20:51
  • You should setup a jsfiddle or similar. Probably you need your #inner css to use percentages like `width: 75%; height:auto` and remove the `right` and `bottom` – Malk Jan 31 '14 at 20:52
  • Yes, thanks @Malk, here's a [jsfiddle](http://jsfiddle.net/shaase/tTU5e/). Menno Gouw, the duplicate you identified is actually the link I referred to in my question. However, I think that is very tied into keeping the width at full and adjusting the height proportionally. I need to do the opposite, and I'm not sure what properties I need to adjust. I'm betting it's simple. – shrug Jan 31 '14 at 21:05
  • You should add the fiddle to your post and describe how you expect it to work. I checked it out, but cannot understand the problem. Should the green box not cover the full [add color to the outer] outer box? Should it add like a letterbox affect to the top/bottom? – Malk Jan 31 '14 at 21:13

0 Answers0