3 Scaling images inline - css

Question

So, I created an image in photoshop that is 1920x1080 and I've spliced it into sections, so that the images that require a link can have an javascript tag attached to them for a link.
I want the images to scale depending on the type of monitor you're using, as long as you're in a 16:9 ratio. The problem I'm having, is in regards to the way the images align 3 in a row. Either the 3rd image in the row gets pushed down, for sections with 3 images. Or, the image is the full size 1920x1080, but no scaling and gaps between images.
My HTML looks like this:
<main>
<section>
<img src="images/NuclearFuelCycle1.png"/>
</section>
<section>
<div><img id="1" src="images/NuclearFuelCycle2.png"/><span style="cursor:pointer" onclick="openMining()"><img id="2" src="images/NuclearFuelCycle3.png"/></span><img id="3" src="images/NuclearFuelCycle4.png"/></div>
</section>
<section>
<img src="images/NuclearFuelCycle5.png"/></section>
<section>
<img src="images/NuclearFuelCycle6.png"/><span style="cursor:pointer" onclick="openConversion()"><img src="images/NuclearFuelCycle7.png"/></span><img src="images/NuclearFuelCycle8.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle9.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle10.png"/><span style="cursor:pointer" onclick="openEnrichment()"><img src="images/NuclearFuelCycle11.png"/></span><img src="images/NuclearFuelCycle12.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle13.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle14.png"/><span style="cursor:pointer" onclick="openReactor()"><img src="images/NuclearFuelCycle15.png"/></span><img src="images/NuclearFuelCycle16.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle17.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle18.png"/><span style="cursor:pointer" onclick="openSpentFuel()"><img src="images/NuclearFuelCycle19.png"/></span><img src="images/NuclearFuelCycle20.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle21.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle22.png"/><span style="cursor:pointer" onclick="openFuelFabrication()"><img src="images/NuclearFuelCycle23.png"/></span><img src="images/NuclearFuelCycle24.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle25.png"/></section>
<section>
<img src="images/NuclearFuelCycle26.png"/><span style="cursor:pointer" onclick="openStorageDisposal()"><img src="images/NuclearFuelCycle27.png"/></span><img src="images/NuclearFuelCycle28.png"/>
</section>
<section>
<img src="images/NuclearFuelCycle29.png"/>
</section>
</main>
My CSS looks like this:
* {
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
body {
max-width: 100% !important;
height: auto;
}
main {
display: inline-block;
padding: 10px;
}
section div img{
width: auto;
}
Some of this code is not useful... It's me experimenting to try and create a solution. Any help would be greatly appreciated, I have to submit this in 2 days P

Answer 1

The 'spaces' problem is most likely due to the way display:inline works, which is what an image and a span is. Any newlines, etc get treated as a space char. An easy fix could be something that uses display:flex.
The second (and main part) of your problem is that you want to scale based on width. A little bit of javascript and use of transform: scale(...) fixes that. Below is a snippet (which can't show resizing), so here's a CodePen too: https://codepen.io/anon/pen/PpXpwO
window.onresize = resizer;
resizer();
function resizer() {
console.log("resized")
var _main = document.querySelector("main");
var image_width = 600; // the original image width
var ratio = _main.offsetWidth/image_width;
_main.style.transform = "scale("+ratio+")";
};
main {
transform-origin: 0 0;
}
section {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
section * {
flex: 0 0 auto;
display: block;
}
<main>
<section>
<img src="https://placehold.it/600x150g" />
</section>
<section>
<img id="1" src="https://placehold.it/100x150" />
<a style="cursor:pointer" onclick="openMining()"><img id="2" src="https://placehold.it/300x150/370000" /></a>
<img id="3" src="https://placehold.it/200x150" />
</section>
<section>
<img src="https://placehold.it/600x150g" />
</section>
</main>

Answer 2

If I'm understanding correctly your sliced image segments are repositioning incorrectly as the browser window resizes.
Rather than slicing up your image and using javascript, why not try a pure HTML solution and use the <map> tag to insert your links at various parts of the image?
Here's a Fiddle demonstrating a scalable HTML image map (uses the image-map-resizer plugin)
You can learn more about image maps here.