0

The goal is to define an aspect ratio (f.E. 4:3) for a DIV and all children of it, that have the styles WIDTH:100% and HEIGHT:100%.

This works fine, as long as I set the parent

WIDTH:100%

and then add to the first child a 

PADDING-BOTTOM: 75%; // (3/4)*100

But if I resize my window to full screen on a 1080p monitor, the inner box will (sadly) correctly grow to be 100% in width and to 75% of the width, in height. Thus a 1920pixel wide div will grow to 1920x1440. On a 1080p screen this means, that I will have scrollbars to see the complete content of the div.

I'd prefer the inner box to only be (window.innerHeight / 3) * 4 wide and have a black bar on the left (and/or) right.

So I assumed that setting the height on the parent and then defining a padding-right on the child would have the same effect, but would give me the black bars on the right of the screen and not on the bottom.

But this does not work if you set the parent

HEIGHT:100%

and then add a

PADDING-RIGHT: 33% // ((4/3)-1)*100

to the children because the paddings are based on the containing elements width.

Now in a perfect world, I'd like to have my div, no matter what the height and width of the parent are, to be exactly 4:3, with black bars around it if neccessary , without ever being bigger in any dimension than the parent and thus creating scroll bars.

Is this possible with purely CSS? Or will I have to use JavaScript?

Edit:

with

<div style="width:133vmin;height:100vmin;margin-left:-66vmin;left:50%;background: #f00; overflow:hidden;">

I'm able to define a div that has 4:3 aspect ratio and has blackbars on the left and right, but if the height is not enough, it will not grow in size. Now I'd need to somehow combine both solutions...

FTav
  • 389
  • 4
  • 13
  • can you use max-height to solve it? – Medda86 Apr 02 '14 at 20:21
  • Hi Medda86, thanks for this idea. Initially I couldn't imagine how this could help me, but a restriction on the maximum width to be not more than 4/3 of the height worked well. Thx for the nudge in the right direction :) – FTav Apr 03 '14 at 09:05

2 Answers2

0

I wrote a solution, but sadly it doesn't work with the latest stable Chrome, there is a bug filed: https://bugs.webkit.org/show_bug.cgi?id=94158

However it does work on Firefox 25.0 and Chrome Canary 36.0.1922.0

<html>
<style>

body {
    margin:0;
    background: #000;
}

#block1 {
    display: inline-block;
    position: relative;
    width: 100vw;
    max-width: calc(100vh * 1.33333); // (4 / 3)
}
#block1:after {
    content: '';
    display: block;
    margin-top: 75%; // (3 / 4) * 100
}
#block2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

</style>
<body>
<div id="block1"><div id="block2"></div></div>
</body>
</html>
FTav
  • 389
  • 4
  • 13
0

Your CSS should look like:

#block1{
    position: relative;
    width: 100%;        /* desired width */
}
#block1:before{
    content: "";
    display: block;
    padding-top: 75%;   /* initial ratio of 1:1*/
}
#block2{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

That should do it. Works cross browser back to IE8.

Comes form this great article: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

user3801238
  • 9
  • 1