如何强制HTML元素在没有JavaScript的情况下保持恒定的宽高比?

时间:2015-05-02 05:57:24

标签: javascript php html css svg

以下是我使用JavaScript制作的示例。无论页面的尺寸是多少,每块砖的比例始终为5:2,页面上总共会有20块砖。

<!doctype html>
<html>
  <body>
    <svg id="wall" style="position:absolute;top:0;left:0;" width="100%" height="100%" onload="renderBackground();" onresize="renderBackground();">
    </svg>
    <script>
      var wall=document.getElementById("wall");
      function renderBackground()
      {
        var width=window.innerWidth;
        wall.innerHTML="";
        for(y=0;y<window.innerHeight;y+=width/25)
        {
          // Even Bricks
          for(x=0;x<width;x+=width/20)
          {
            createBrick(x,y,width/20,width/50);
          }
          // Odd Bricks
          for(x=0-width/40;x<width;x+=width/20)
          {
            createBrick(x,y+width/50,width/20,width/50);
          }
        }
      }
      function createBrick(x,y,width,height)
      {
        var brick=document.createElementNS(wall.namespaceURI,"rect");
        var shine=document.createElementNS(wall.namespaceURI,"rect");
        var drain=Math.random()*24;
        wall.appendChild(brick);
        wall.appendChild(shine);
        brick.setAttribute("x",x);
        brick.setAttribute("y",y);
        brick.setAttribute("width",width);
        brick.setAttribute("height",height);
        shine.setAttribute("x",x+width/20);
        shine.setAttribute("y",y+height/10);
        shine.setAttribute("width",9*width/10);
        shine.setAttribute("height",height/10);
        brick.setAttribute("style","fill:"+rgb(6*Math.random()+128-drain,12*Math.random()+128-drain,6*Math.random()+128-drain)+";stroke:"+rgb(51,51,68)+";stroke-width:"+String(height/20));
        shine.setAttribute("style","fill:"+rgb(160,160,160));
      }
      function rgb(r,g,b)
      {
        return "rgb("+String(Math.floor(Math.max(Math.min(r,256),0)))+","+String(Math.floor(Math.max(Math.min(g,256),0)))+","+String(Math.floor(Math.max(Math.min(b,256),0)))+")";
      }
    </script>
  </body>
</html>

如果我用php生成这个完全相同的页面,完全删除JavaScript,我怎么能强制砖块保持相同的5:2比例,而无需调用renderBackground()来重绘和调整每次调整窗口大小时它们的大小?

我想知道如何在所有元素上执行此操作,而不仅仅是SVG。

谢谢!

1 个答案:

答案 0 :(得分:0)

如果您使用的是IE9或更高版本,除少数移动浏览器外,CSS接受单位尺寸&#34;视口宽度&#34; (vw)和/或&#34;视口高度&#34; (VH)。宽度为5v w 且高度为2v w 的元素将为宽度的5% >宽度,以及高度中视口的宽度的2%。

由于您将元素的宽度和高度设置为视口的仅宽度的百分比,因此它将保持恒定的宽高比。

捕获:它在 SVG元素中不起作用。它严格来说是一个CSS单元。它也考虑整个视口的宽度或高度,而不考虑任何包含元素。你的例子占据了整个屏幕,所以没关系。

知道要绘制多少行会有一些问题,至少不使用JavaScript。您将自己锁定到20列,但行完全取决于客户端的宽高比。