CODEWITHSUNDEEP
htmlcssresponsive-designaspect-ratio
Calvin
Calvin

Reputation: 2912

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:

Upvotes: 13

Views: 10230

Answers (3)

web-tiki
web-tiki

Reputation: 103780

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;
}

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

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]

Upvotes: 2

Roman
Roman

Reputation: 914

I don't think that is possible to do so now with pure CSS. Maybe in future when we will have the full support of CSS variables and calculations. Now you can use a transparent image to specify the aspect ratio or using scripts. Also maybe something like LESS can be useful.

Upvotes: 0

Related Questions