Specify the natural size of an HTML element
===

Let's talk about images in HTML. If I drop an image onto the page with no other constraints, it will assume its "natural size"---that is, the literal size of the image in pixels. If I specify a CSS `max-width` and `max-height` then it will **keep its natural aspect ratio** but **scale down to fit the size constraint**. Awesome!

I want that exact behavior on an arbitrary element. That is, I want to create a `<div>` or something else that has a natural size (which I would specify in pixels) and maintains its aspect ratio when affected by `max-width` and `max-height`. (Bonus points: it would be cool if the technique also supported `min-width` and `min-height`.)

Here is some more information I have collected:

* For an HTML5 image you can read the natural size of an image with the `naturalWidth` and `naturalHeight` attributes, provided the `complete` attribute is true. Unfortunately, as [MDN points out][1], these properties are read-only and are specific to image elements.

* [This approach][2] is brilliant, but (even though the height responds to `max-width`) the width does not respond to `max-height`.

* A bit of searching has failed to turn up a CSS-only solution, which makes me think that one may not exist. I will also accept JavaScript solutions, but they need to be robust to changes in window size and parent element size.

  [1]: https://developer.mozilla.org/en/DOM/HTMLImageElement
  [2]: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
