这是我使用 JavaScript 制作的示例。无论页面的尺寸如何，每 block 积木的比例始终为 5:2，页面上始终有 20 block 积木。
<!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，我如何才能强制砖 block 保持相同的 5:2 比例而不需要调用 renderBackground() 每次调整窗口大小时重新绘制和调整它们的大小？
我想知道如何在所有元素上执行此操作，而不仅仅是 SVG。
谢谢!
最佳答案
如果您使用的是 IE9 或更高版本，除了少数移动浏览器外，CSS 接受单位“视口(viewport)宽度”(vw) 和/或“视口(viewport)高度”(vh) 的尺寸。宽度为 5vw 且高度为 2vw 的元素将在 widthwidth 的 5% strong>，以及视口(viewport)宽度(高度)的 2%。
由于您将元素的宽度和高度设置为视口(viewport)的宽度的百分比，因此它将保持恒定的纵横比。
陷阱:它不会在 SVG 元素内工作。它严格来说是一个 CSS 单元。它还仅考虑整个视口(viewport)的宽度或高度，而不是任何包含元素。不过，您的示例占据了整个屏幕，所以没关系。
虽然您不知道要绘制多少行，但至少在不使用 JavaScript 的情况下会遇到一些问题。您将自己锁定为 20 列，但行数完全取决于客户端的纵横比。
关于javascript - 如何在没有 JavaScript 的情况下强制 HTML 元素保持恒定的宽高比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29999002/