1

Let's say I have a screen divided into quarters (with divs). Inside each of those divs is a div which I would like to remain at fixed proportions (4:3 for example)

Is it possible to achieve this using CSS, without JS?

After scouring Google/Stack for answers, the closest thing I can find is being able to have a div with proportional height based on 100% width, but what I am asking for is the inverse; 100% height width proportional width

I attempted a solution using 100% height and gave the div a padding-width, but that CSS hack only works because the padding property is based on the width of the div. See below.

Fiddle: http://jsfiddle.net/244kcd4z/

My attempt below; I am able to achieve a % width, but not a proportional % width based on height.

enter image description here

Is there simply no other way but to use JavaScript to calculate the height of the 4:3 divs based on the 100% width of the divs?

(Full code below)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .half_width_container {
      width: 50%;
      height: 100%;
      position: absolute;
      display: inline-block;
    }
    .half_width_container.left {
      left: 0;
    }
    .half_width_container.right {
      right: 0;
    }
    .half_height_container {
      position: relative;
      height: 50%;
      width: 100%;
    }
    .half_width_container.left .half_height_container.top {background-color: #9595e3;}
    .half_width_container.left .half_height_container.bottom {background-color: #9596CC;}
    .half_width_container.right .half_height_container.top {background-color: #954874;}
    .half_width_container.right .half_height_container.bottom {background-color: #954066;}

    .proportionalDiv p {
      font-size: 40px;
      color: black;
      display: block;
      padding: 0;
      margin: 0;
    }
    .proportionalDiv {
      background-color: white;
      opacity: 0.5;
      height: 100%;
      width: 0;
      padding-right: 33%;

      margin: 0 auto;
    }
  </style>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>
    <body>
  <div class="half_width_container left">
    <div class="half_height_container top">
      <div class="proportionalDiv">
        <p>1</p>
      </div>
    </div>
    <div class="half_height_container bottom">
      <div class="proportionalDiv">
        <p>2</p>
      </div>
    </div>
  </div>
  <div class="half_width_container right">
    <div class="half_height_container top">
      <div class="proportionalDiv">
        <p>3</p>
      </div>
    </div>
    <div class="half_height_container bottom">
      <div class="proportionalDiv">
        <p>4</p>
      </div>
    </div>
  </div>
    </body>
</html>
1owk3y
  • 1,115
  • 1
  • 15
  • 30
  • Doesn't really work because it allows the div's to exceed 100% width – 1owk3y Oct 25 '14 at 05:34
  • You may also check this http://stackoverflow.com/questions/23630140/fit-responsive-square-in-viewport-according-to-width-and-height/23631436#23631436 it is for a square though – web-tiki Oct 25 '14 at 05:36
  • Attempted to modify, but unfortunately it only works with square ratios. Solution breaks when using a different ratios: http://jsfiddle.net/0un1k2xb/ (resize the fiddle preview to use a very tall/thin page) – 1owk3y Oct 25 '14 at 05:57
  • 1
    You could use `vmin` units : http://jsfiddle.net/webtiki/0un1k2xb/1/ BTW I updated the answer here : http://stackoverflow.com/questions/23630140/fit-responsive-square-in-viewport-according-to-width-and-height/23631436#23631436 with these units – web-tiki Oct 25 '14 at 06:14
  • This works really well on modern browsers... except IE of course. This a really good solution, but the lack of IE support makes it basically unusable due to project requirements - my fault for not mentioning the browser support necessity. I'd still mark this as the correct answer except now this is marked a duplicate. Thanks for your help though! – 1owk3y Oct 25 '14 at 09:02
  • 1
    Browser support is supposed to go back to IE9 witch is pretty good. If you need to support IE8 you will need a JS fallback. You should be able to trigger the fallback with modernizr.js. – web-tiki Oct 25 '14 at 09:06

0 Answers0