18 / Texture fitting & crop anchors
Fit the frame. Keep the shape.
A generated test image keeps its circles round as the plane changes shape. Compare cover with contain, move the crop anchor, and inspect the scale values sent to the shader.
Rendering needs WebGL
This study uses a locally authored shader. Its source, explanation and parameter controls remain available if a drawing context cannot be created.
What this study teaches
The CPU calculates image and plane aspect-ratio fitting only when its dimension inputs change. A simple texture sampler consumes the derived UV scale and anchor offset. Cover and contain share one fit calculation with zero-size guards; a collapse animation updates only the changing plane dimension.
Independent implementation informed by “Replicating CSS Object-Fit in WebGL: Optimized Techniques for Image Scaling and Positioning”, Nicolas Giannantonio, Codrops. This is newly authored code and artwork, not a recovered original project. The article contains partial class/update helpers; author their scaffold independently. Verify extreme portrait/landscape ratios and zero-size handling before calling the result complete.