Proportionally scale a div with CSS based on max-width (similar to img scaling)

Question

Is it possible to proportionally scale a div like an img using only CSS? Here is my first attempt: http://dabblet.com/gist/1783363

Example

div {
 max-width:100px;
 max-height:50px;
}
img {
 max-width:100px;
 max-height:50px;
}

Actual Result

Container: 200 x 100
Div:       100 x 50
Image:     100 x 50

Container: 50  x 100
Div:       50  x 50  // I want this to be 50x25, like the image
Image:     50  x 25

The Dabblet servers are currently down, so this could be not what you are after at all, but isn't that what percentages are for? — joshnh, Feb 10 '12 at 00:07
@bfrohs did all the work: http://stackoverflow.com/posts/9219005/revisions I just removed a few backticks from the title. (I should have also fixed the spelling error in the title but I didn't see it until now.) — sarnold, Feb 14 '12 at 00:24

score 37 · Accepted Answer · answered Feb 10 '12 at 23:41

37

Since vertical paddings set in percent are calculated out of width of an element we can make a div always be of a certain aspect ratio.

If we set padding-top:50%; height:0, the height of the div will always be half of its width. And to make text appear inside such a container you need to make it position:relative and put another div inside it and position it absolutely 10px away from all four sides (the padding you set first).

See my fork of your code.

answered Feb 10 '12 at 23:41

Spadar Shut

14,473
5
42
52

1

Brilliant! Thanks for the help. – Adam Youngers Feb 14 '12 at 00:19
genius! [filling character limit] – Dominic May 21 '12 at 10:44
4

If this doesn't work for anyone (it didn't for me), use padding-bottom instead of padding-top, as per this answer: http://stackoverflow.com/questions/8894506/can-i-scale-a-div-height-proportionally-to-width-of-the-div-with-the-help-of-onl – bradleygriffith Sep 03 '13 at 00:26
1

Unfortunately horizontal padding *also* uses the width, so this trick doesn't work with a percent height and padding-left. – Jackson May 28 '14 at 03:25

score 5 · Answer 2 · answered Feb 09 '12 at 21:43

5

Sort of. You could use transformations to scale it up, but I'm not sure that's what you have in mind.

-webkit-transform:scale(2); (and other prefixes) would double it in size, without altering page layout.

answered Feb 09 '12 at 21:43

zim2411

628
4
6

score 0 · Answer 3 · answered Jun 02 '17 at 05:49

0

Try:

.container img {
    height:50vw;
}

The vw follows the viewport You need to set in the head of your document:

<head>
<meta name="viewport" content="width=device-width">
</head>

answered Jun 02 '17 at 05:49

user3849374

127
1
3

Proportionally scale a div with CSS based on max-width (similar to img scaling)

Example

Actual Result

3 Answers3

Linked