Dynamic positioning based on screen width and window width only - html

Question

I've trawled through various 'solved' dynamic positioning queries but cannot find anything that helps.
I have the following page...
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | 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) I want the images to resize based on the window width only, i.e. if the user resizes the window vertically I don't want the images resized.
(2) Also, I only want this resizing to happen until the window is 50% of the screen width, then they will remain the same size, i.e. IMG 1 width would remain at 10% of the screen width.
I can achieve (1) for the top row. The problem is for IMGs 5 -8 since the 'top' value is calculated from the window height.
Is there some way I can achieve what I want dynamically?
I can't use calc() since it bases its result for top based on window height.
Also, there appears to be no CSS for screen.width and JS is not dynamic for resizing.
Any help would be greatly appreciated. (further images are below might help explain what I mean)
magic²
Full Screen
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | 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 | |
| | | | | |
| +-----------+ +-----------+ |
+-----------------------------------------------------------------------+
width: 50% height:100%
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-------------------------------------------+
width: 50% height: 50%
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
+-------------------------------------------+
width: 33% height: 50%
+-------------------------+
| +------+ +---------+ +--|
| |IMG 1 | | IMG 2 | | |
| | | | | | |
| | | +---------+ +--|
| +------+ |
| +------+ |
| |IMG 5 | |
| | | |
| | | |
| +------+ |
| +------+ |
| |IMG 7 | |
+-------------------------+

Answer 1

So this method isn't perfect, but in order to do this you need a value that represents the size of the screen without using %. In CSS there are 2 values you can use, these are vw and vh, for your purposes you will want vw for the width of the viewport.
vw is equal to the viewport width / 100
vh is equal to the viewport height / 100
These values are dynamic, if the window is resized so are these, so in order to keep constant proportions you can use either vw or vh, here's an example.
.square
{
width: 2vw;
height: 2vw;
background-color: lightblue;
position: relative;
top: 5vh;
left: 5vw;
}
<div class="square">
</div>
You could do more advanced calculations by working out the aspect ratio of the screen, but you get the idea.

Answer 2

Found what I required, it was the javascript onresize event.
<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>
This resizes the image # 20% window.innerWidth until window.innerWidth <= screen.width, then the image size remains the same # 10% screen.width.