Scaling and Pixelating
This code demo was published on .
It’s JS Naked Day!
I’m participating in JS Naked Day with the hope of helping to promote the rule of least power
. This means that your browsing experience on this website during the 50 hours that make up JS Naked Day should be identical to one where you have disabled JavaScript in your browser.
This is an excellent exercise in making sure there is a clear separation of concerns between HTML for markup, CSS for styling, and JavaScript for interactivity. I highly recommend trying it out and participating yourself!
Sorry, this code snippet failed to load, but you can still check it out over on CodePen!
This Pen demonstrates the differences between scaling an image with a transform and scaling an image by modifying the dimensions.
Designating the image-rendering property as pixelated with a transform scale seems to result in anti-aliasing around the edges of the image. Applying the same property value to a dimensional scale does not seem to exhibit the same anti-aliasing.