title: Specify the natural size of an HTML element
body: <p>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 <code>max-width</code> and <code>max-height</code> then it will <strong>keep its natural aspect ratio</strong> but <strong>scale down to fit the size constraint</strong>. Awesome!</p>
  
  <p>I want that exact behavior on an arbitrary element. That is, I want to create a <code>&lt;div&gt;</code> or something else that has a natural size (which I would specify in pixels) and maintains its aspect ratio when affected by <code>max-width</code> and <code>max-height</code>. (Bonus points: it would be cool if the technique also supported <code>min-width</code> and <code>min-height</code>.)</p>
  
  <p>Here is some more information I have collected:</p>
  
  <ul>
  <li><p>For an HTML5 image you can read the natural size of an image with the <code>naturalWidth</code> and <code>naturalHeight</code> attributes, provided the <code>complete</code> attribute is true. Unfortunately, as <a href="https://developer.mozilla.org/en/DOM/HTMLImageElement">MDN points out</a>, these properties are read-only and are specific to image elements.</p></li>
  <li><p><a href="http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio">This approach</a> is brilliant, but (even though the height responds to <code>max-width</code>) the width does not respond to <code>max-height</code>.</p></li>
  <li><p>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.</p></li>
  </ul>