Question

我们说我有一个分为四分之一的屏幕（有div）。在每个div中都有一个div，我希望保持固定的比例（例如4：3）

有没有可能使用CSS实现这一点，没有JS？

在Google / Stack搜索答案之后，我能找到的最接近的东西是能够得到一个基于100％宽度的比例高度的div，但我要求的是反过来; 100％高度宽度比例宽度

我尝试使用100％高度的解决方案并给div一个填充宽度，但CSS hack只能起作用，因为padding属性基于div的宽度。见下文。

小提琴： http://jsfiddle.net/244kcd4z/

我在下面的尝试;我能够达到％宽度，但不能达到基于高度的比例％。

enter image description here

除了使用JavaScript根据div的100％宽度计算4：3 div的高度之外，没有别的办法吗？

（下面的完整代码）

<!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>

比例宽度div高度为100％（没有JS？）

0 个答案: