To anyone else who's having this problem in the future, the solution I'm using that so far is working reasonably well is using the svg tag. Here's an example of a pane of my frames:
Code:
<div id="h70">
<svg width="100%" height="100%" viewBox="0 0 800 550">
<g>
<image x="0" height="300" width="400" xlink:href="images/part2frame14.png" preserveAspectRatio="xMinYMax slice"/>
<image x="410" height="300" width="400" xlink:href="images/part2frame15.png" preserveAspectRatio="xMidYMax slice"/>
</g>
<g transform="translate(0 310) scale(0.8)">
<image x="0" height="300" width="370" xlink:href="images/part2frame16.png" preserveAspectRatio="xMidYMax slice"/>
<image x="380" height="300" width="340" xlink:href="images/part2frame17.png" preserveAspectRatio="xMidYMid slice"/>
<image x="730" height="300" width="290" xlink:href="images/part2frame18.png" preserveAspectRatio="xMaxYMid slice"/>
</g>
</svg>
</div>
The hight of an SVG in the context of being responsive to screen size is tricky. The
id="h70" is
Code:
#h70 {
height: 70vw;
}
It's not quick and automatic, and you have to set the frames individually, but you have a large degree of creative control and that's nice. You can alter the size so they match, you can crop them, and so on.