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
naturalWidthandnaturalHeightattributes, provided thecompleteattribute is true. Unfortunately, as MDN points out, these properties are read-only and are specific to image elements.This approach is brilliant, but (even though the height responds to
max-width) the width does not respond tomax-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.