0

I have set up a <div> that resizes, depending on the width of the browser window. How can I make the height automatically set to match the width in proportion? In other words, I need the height to be 50% of the width, for example. I need it to work without JavaScript.

Phoenix Logan
  • 1,238
  • 3
  • 19
  • 31
  • Did you try height=100% ?, Put an example on jsFiddle. – Kivylius May 05 '14 at 20:33
  • Do you want the height to be the same as the width? Or you want it to scale proportionately? Your question is unclear to me. If you set width to 100%, and don't set a height, it should scale dynamically. – TylerH May 05 '14 at 20:37
  • The height is supposed to be proportional to the height. (width 16, height 9) – Phoenix Logan May 05 '14 at 20:40
  • You can check out this answer : http://stackoverflow.com/a/20457076/1811992 – web-tiki May 05 '14 at 20:53
  • If you setup some media query you can do that but with fixed values. If you want % values you need to use js – keypaul May 05 '14 at 20:53
  • possible duplicate of [Height equal to dynamic width (CSS fluid layout)](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) – web-tiki May 05 '14 at 20:57
  • Why a downvote? What's wrong with the question? – Phoenix Logan May 06 '14 at 12:15

2 Answers2

2

Here's one hack that you can use: a quirk with CSS is that the top and bottom paddings/margins, when set to percentages, are computed based on the width of the parent element, not its height.

So, if you want a square div, which is, say, 50% the width of its parent element. To make it square, you simply set it's bottom padding to 50%, too.

The thing is that you have to adjust the padding percentage based on the div's width. If the div's width is set to 75% of parent, for example, to get a square you will need to use a bottom padding of 75%.

div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%; /* (50%*1) */
}
.landscape {
    padding-bottom: 37.5%; /* (50%*(3/4)) */
}
.portrait {
    padding-bottom: 66.6667%; /* (50%*(4/3)) */
}

Here's a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/Vsj33/

Terry
  • 63,248
  • 15
  • 96
  • 118
1

If you know the ratio of your image, then you might be abble to keep the same ratio for your div.

DEMO (rezise window's width)

How does this work ?

  1. Insert a floatting pseudo element inside the box
  2. set it a vertical padding in percentage value. This % will take the box width as reference.

So a padding vertical of 100%, will stretch the box to a square. It will grow longer if content inside has not enough room :)

Community
  • 1
  • 1
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This works, as the ratio is fixed. – Phoenix Logan May 05 '14 at 20:52
  • perfect for you. enjoy :) – G-Cyrillus May 05 '14 at 20:53
  • Okay. I have a question. Besides the :before psuedoclass having the `padding-top: percentage%`, do I need anything else to make it work? I'm asking because I only put this in, and it didn't work. I hope I don't have to use the floats. – Phoenix Logan May 05 '14 at 20:58
  • You can use inline-block instead or overflow:hidden. inline-block example for pseudo : http://codepen.io/gc-nomade/pen/gzIfu/ and float only for pseudo http://codepen.io/gc-nomade/pen/uxeta – G-Cyrillus May 05 '14 at 21:04