Let's consider an example:
- Imagine a 1000x1000 image
- We apply styling to it with
width:10px - Then, we add a transformation style that scales it by 100 times:
transform: scale(100, 100) - Now the image appears to be only 1000 pixels in size.
The issue at hand:
- One would expect the scaled image to appear blurry since it has been reduced significantly. However, this is not the case as the image retains its full resolution.
Is there a way to control the quality? Various attempts were made such as applying the scale property to both the parent and child elements, but the image continues to render at its original size.
See the problem in action on JSFiddle here
Reason for needing this:
- A scaling animation is needed from a 4000x4000 image to 600x600, however, there is noticeable lag when scaling down. Interestingly, scaling up from 600x600 to 4000x4000 is smooth due to resizing the dimensions after the transition completes.
Despite the challenges, the use of canvas is currently avoided...
Appreciate any assistance provided!