Specify the natural size of an HTML element

Question

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, 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 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.

Answer 1

Here's my super duper solution:

The HTML

<div class="ratioBox">
    <div class="dummy"></div>

     <div class="el">This is the super duper ratio element </div>

</div>

The CSS

.ratioBox{
    position: relative;
    overflow: hidden;      /* to hide any content on the .el that might not fit in it */
    width: 75%;            /* percentage width */
    max-width: 225px;
    min-width: 100px;
    max-height: 112.5px;
    min-height: 50px;  
}

.dummy {
    padding-top: 50%;      /* percentage height */
}

.el {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

​

See it working here: http://jsfiddle.net/joplomacedo/7rAcH/

The explanation, in case you can't understand what is happening, will come at the end of the day as I'm unfortunately out of time. [it's July 28, 2:54PM (GMT Time) as I write this]

Answer 2

Resize a div like an image with CSS

DEMO : resize the result window (width and height) to see the div resize like the image.

In the demo you can see both image and div resize the same way according to the height and the width of the result window viewport.

This technique uses vh/vw units. They alow you to set the width according to the height of viewport and the height according to the width of viewport.
With the combined use of max-width and max-height you can make it behave and resize like an image on browser resize.
Browser support for these units : IE9+. For more info see canIuse.
The above demo uses a 1:1 aspect ratio but you may with a bit of calculation use any other aspect ratio, examples :

• 4:3 aspect ratio : demo
• 16:9 aspect ratio : demo

CSS (for a 1:1 aspect ratio)

div{    
    width: 80vw; 
    height: 80vh;

    max-width: 80vh;
    max-height: 80vw;
}

One step further : vmin and vmax

You can also use vmin/vmax. These units select the minimum or maximum value between the width and height of viewport so you can have the max/min-height and max/min-width desired behaviour. But the browser support for these units isn't as good as vh/vw (canIuse).

Demo

CSS (for a 1:1 aspect ratio) :

div{    
    min-width:200px;
    min-height:200px;

    width: 80vmin; 
    height: 80vmin;

    max-width: 800px;
    max-height: 800px;
}