我已经通过各种“已解决”的动态定位查询进行了搜索，但找不到任何有用的信息。 我有以下页面......
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | IMG 1 | | | | | | IMG 4 | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| | aspect | | aspect ratio 4:3 | | aspect ratio 4:3 | | aspect | |
| | ratio | | | | | | ratio | |
| | 3:4 | +------------------+ +------------------+ | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 5 | | IMG 6 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 7 | | IMG 8 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
+-----------------------------------------------------------------------+
（1）我希望图像仅根据窗口宽度调整大小，即如果用户垂直调整窗口大小，我不希望调整图像大小。 （2）另外，我只希望调整大小直到窗口宽度为50％，然后它们将保持相同的大小，即IMG 1宽度将保持在屏幕宽度的10％。
我可以达到（1）顶行。问题出在IMG 5 -8上，因为'top'值是从窗口高度计算出来的。
有什么方法可以动态实现我想要的东西吗？ 我不能使用calc（），因为它根据窗口高度将其结果基于top。 此外，似乎没有用于screen.width的CSS，并且JS不适用于调整大小。
非常感谢任何帮助。 （下面的其他图片可能有助于解释我的意思）
magic²
全屏
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | IMG 1 | | | | | | IMG 4 | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| | aspect | | aspect ratio 4:3 | | aspect ratio 4:3 | | aspect | |
| | ratio | | | | | | ratio | |
| | 3:4 | +------------------+ +------------------+ | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 5 | | IMG 6 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 7 | | IMG 8 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
+-----------------------------------------------------------------------+
宽度：50％高度：100％
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-------------------------------------------+
宽度：50％高度：50％
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
+-------------------------------------------+
宽度：33％高度：50％
+-------------------------+
| +------+ +---------+ +--|
| |IMG 1 | | IMG 2 | | |
| | | | | | |
| | | +---------+ +--|
| +------+ |
| +------+ |
| |IMG 5 | |
| | | |
| | | |
| +------+ |
| +------+ |
| |IMG 7 | |
+-------------------------+
答案 0 :(得分：0)
所以这种方法并不完美，但为了做到这一点，你需要一个代表屏幕大小而不使用％的值。在CSS中你可以使用2个值，它们是vw和vh，为了你的目的，你需要vw作为视口的宽度。
vw等于视口宽度/ 100
vh等于视口高度/ 100
如果窗口调整大小，这些值是动态的，所以为了保持不变的比例你可以使用vw或vh，这里是一个例子。
.square
{
width: 2vw;
height: 2vw;
background-color: lightblue;
position: relative;
top: 5vh;
left: 5vw;
}<div class="square">
</div>
你可以通过计算屏幕的宽高比来进行更高级的计算，但是你明白了。
答案 1 :(得分：0)
找到我需要的东西，这是javascript onresize事件。
<html>
<head>
</head>
<body onresize="myFunction()">
<span id="demo"><img src="img1.jpg" width="20%"></span>
<script>
function myFunction() {
if (window.innerWidth > (screen.width/2))
{
var txt = "<img src='img1.jpg' width='20%'>";
} else {
var txt = "<img src='img1.jpg' width='";
txt = txt + screen.width/10;
txt = txt + "'>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
这会调整图像@ 20％window.innerWidth的大小，直到window.innerWidth＆lt; = screen.width，然后图像大小保持不变@ 10％screen.width。