Reply To: Suggestions on presenting images with mobile layout

[Shikkediel]

Done as said. Mostly anyway, still working on some details. Not as straightforward an approach was possible as one could do with a simple image… because it’s actually an iframe.

But I think the solution ended up pretty neat – using transforms to make the element responsive. Which requires a bit of imagination to combine a scale with a translate and position/center the transformed iframe correctly. Calculated with JS but there’s nothing really there to see without it anyway.

Discovering something in the process I wasn’t at all aware of… if you do this, the translate will be 100 pixels as you’d expect:

transform: translateX(100px) scale(0.7);

But reversed the pixels will also be scaled!

transform: scale(0.7) translateX(100px);

So this will only translate 70 pixels…

o_O

Edit – I often forget to mark helpful answers but in this case it’ll be like telling Bolt he’s a pretty good runner.