6

Is it possible to give a div a width which is a percentage of the window, and a height which is a certain percentage of it's current width? So the div resizes, but keeps the same aspect ratio when you resize your browser window.

Thanks Ciao

Bart
  • 261
  • 3
  • 14
  • @bart did any of these answers suit your needs? including the possible duplicates? if so, show some love. – Todd Dec 12 '14 at 20:29
  • Sorry, I don't know yet! I'm still trying.. :p I'm certainly not a professional at this, i'm doing this in my free time. At the moment, i'm building a small website for an aquaintance of me. But i'll need some time to figure out how everything works an how I can apply the suggested solutions. But when I get it working, i'll certainly mark the answer which helped me most. They all seem very helpful. – Bart Dec 12 '14 at 20:40
  • keep it up! i started as hobby, as well, while getting bio degree, now I do it full-time. – Todd Dec 12 '14 at 21:07
  • Haha thanks, well i'm 18 and currently studying for my bachelors degree automotive engineer, so that's just as different from programming as biology is. Never had any education in this, but i kinda like it.. :) – Bart Dec 12 '14 at 21:17

5 Answers5

6

There's the padding trick, already answered, but I use another approach, envolving two nested divs.

The parent one, I set the width. The child one, I use the height value as a container unit vw - (means viewport width).

It works well, see here (resize the viewport)

<div>
    <div></div>
</div>

CSS:

div {
    width: 100%;
}

div > div {
    background: silver;
    height: 10vw;
}
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • like it! interesting approach. – Todd Dec 12 '14 at 19:06
  • though you don't need to nest divs in order for that to work. `div { width: 100%; height: 10vw; background: silver; }` would produce the same result, no? I still up-v'd, especially since viewport units are awesome, and are becoming better supported. – Todd Dec 12 '14 at 19:16
  • http://jsfiddle.net/k3855hLc/4/ – Todd Dec 12 '14 at 19:17
  • 1
    @Todd - It would only if you want the `width` to be `100%`. Because the `vw` is relative to the container viewport... In this case, the window. – LcSalazar Dec 12 '14 at 19:18
  • http://jsfiddle.net/k3855hLc/7/ I'm not seeing where thats the case. Am I missing something? @LcSalazar – Todd Dec 12 '14 at 19:24
  • Resize the second jsFiddle you posted... The height is reduced, but the width remains fixed... It's because the `vw` is relative to the parent, in this case, the window. But the OP was asking for a relation between the height and the width of the div itself.... – LcSalazar Dec 12 '14 at 19:26
  • Yeah, still an interesting technique, but unless you're going for something with full-width, it wont hold an aspect ratio. At that point, it'd have no advantage over width: 33.3%, for instance. – Todd Dec 12 '14 at 19:31
  • Should be noted this is IE9+ only with partial support : http://caniuse.com/#feat=viewport-units - That said, I love this. – AlienWebguy Dec 12 '14 at 19:32
  • @AlienWebguy don't you like me? – Todd Dec 12 '14 at 20:10
  • I like it too, because you can keep it simple this way, which is very welcome in my case since i'm not widely experienced with CSS3. I started to play with this vw and it does the trick for me. I did not use nested div's. My div must have a 2:1 ratio, and the width happens to be 72%, so i set the vw(height) at 36, half of 72. I don't know if this is the most profesional way, but it's certainly the shortest :P now i'm gonna try to place another div which is connected on the bottom of this variable div. wish me luck :p – Bart Dec 12 '14 at 21:46
5

I use this

DEMO 1

.aspect-ratio {
    max-width: 100%;

}
.aspect-ratio:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: ({height-aspect} / {width-aspect} * 100)%; // for 3 x 4, for instance: 75%
}

DEMO 2

if you prefer less like me, you can make a mixin:

.aspectRatio(@widthAspect, @heightAspect) {
    @aspect: @heightAspect/@widthAspect * 100;
    max-width: 100%;

    &:before {
        content: '';
        display: block;
        width: 100%;
        padding-bottom: ~"@{aspect}%";
    }
}
Todd
  • 5,314
  • 3
  • 28
  • 45
2

If you set the top and bottom padding of an element in percentages it'll be relative to the width of the element.

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
  • If you're going to ignore the two duplicate links in the comments to farm rep, you could at least provide some working example code for future visitors. – AlienWebguy Dec 12 '14 at 19:01
  • I didn't notice the comments. Should I link to the link you provided in your comment? Should I vote to close? – Bill Criswell Dec 12 '14 at 19:05
  • could you link to a vote to close? – Todd Dec 12 '14 at 19:18
  • I have no idea. I voted to close though. We'll see how that goes. I also upvoted your answer haha. – Bill Criswell Dec 12 '14 at 19:24
  • You should just link to my answer, then? :P I know people get all hand-wavy about duplicates. The thing is this: there are many answers to every question, yet not every question gets every answer -- let alone the best one. I learn a lot by looking at various answers to the 'same' question. – Todd Dec 12 '14 at 20:09
2

When you use a percentage in height, it is calculated with respect to the height of the generated box's containing block.

Since you want to calculate it with respect to it width, you can use, for example, padding-top.

To avoid it affecting the contents, place them in a absolutely positioned wrapper.

#wrapper {
  padding-top: 25%; /* ratio */
  border: 1px solid;
  position: relative;
}
#content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div id="wrapper">
  <div id="content">
    <p>Foo</p>
    <p>Bar</p>
    <p>Baz</p>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Yes with jquery you can get the screen width and height, then you can target that div and set the heigth and width

http://api.jquery.com/width/

setting width of div jquery

Community
  • 1
  • 1
Tobi Klostermair
  • 195
  • 4