Fixed aspect ratio and full (100%) height

Question

Is it possible to make a "full-height" (height : 100%) div with fixed aspect ratio?

It's impossible because padding-left/right not depend of height parents element :( — Dmitry A., Nov 23 '19 at 15:53

score 2 · Accepted Answer · edited May 23 '17 at 11:53

2

Yes there are many ways to accomplish this, an easy one is to set both the width and height of a div relative to the viewport height using viewport units (VH).

div {
    width:40vh;
    height:100vh;
}

Another simple solution is to use a wrapper div with percentage padding as seen in this solution.

edited May 23 '17 at 11:53

Community

1
1

answered Feb 08 '17 at 22:22

Dylan Stark

2,325
17
24

Thank you. It's all I need :) padding-bottom not useful for me because it depend of the width. I need depending on height. – Dmitry A. Feb 08 '17 at 23:12
@DmitryA. you are welcome! I believe you could also do the padding method with padding-right or padding-left to set the width relative to the height. – Dylan Stark Feb 09 '17 at 00:21

Fixed aspect ratio and full (100%) height

1 Answers1