scale a div's width proportionally with 100% height

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.

链接地址: http://www.djcxy.com/p/64504.html

上一篇: 使用CSS放大页面时图像的高度

下一篇: 以100％的高度按比例调整div的宽度