View Single Post
Old 11-10-2019, 05:57 PM   #6
Azdaema
Member
Azdaema began at the beginning.
 
Posts: 12
Karma: 10
Join Date: Nov 2019
Device: iphone
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.
Azdaema is offline   Reply With Quote