https://github.com/greggman/pixel-perfect.js

Display Image Pixel Perfect
https://github.com/greggman/pixel-perfect.js

css html images

Last synced: 7 days ago
JSON representation

Display Image Pixel Perfect

• Host: GitHub
• URL: https://github.com/greggman/pixel-perfect.js
• Owner: greggman
• License: mit
• Created: 2022-06-13T08:17:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-31T03:11:21.000Z (over 1 year ago)
• Last Synced: 2024-04-14T06:08:12.002Z (7 months ago)
• Topics: css, html, images
• Language: HTML
• Homepage: https://greggman.github.io/pixel-perfect.js/
• Size: 43 KB
• Stars: 26
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# pixel-perfect.js

Display images *pixel-perfect*

[See example](https://greggman.github.io/pixel-perfect.js)

## Note: 

It looks like [`image-resolution: snap` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution)

is supposed to do exactly what this library does. As if July 25th 2022 no browser has implemented it.

## How to use

In your image tags that you want to be pixel perfect give them

the class `pixel-perfect` and set a CSS size that is some

integer multiple of your image.

Example:

```html



```

Here we want the image displayed 4x it's original size. The reason to do it this way

is so if the user has JavaScript disabled they'll still a size that matches

your design.

Define your `pixel-perfect` class as follows

```css

.pixel-perfect {

  image-rendering: pixelated;

  image-rendering: crisp-edges;

}

```

Include this script on your page

```html

;

```

Done!

## Canvas

For `` set both a width and height and a CSS 

width and height. Example:

```html

```

Note: as it says on [the main page](https://greggman.github.io/pixel-perfect.js),

this solution only works for designs that allow the canvas to change its display size

relative to other elements. For example the canvas above is 200x100 pixels. 

To stay pixel perfect it can not go smaller, and going larger it must

change to integer multiples like 400x200, 600x300, 800x400, etc...

If you have a canvas that fits a container or the entire

page or that's required to have a fixed size then 

[you need a different solution](https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html).

## Special use cases

You can also import pixel-perfect.js as an es6 module.

```js

import {makePixelPerfect} from './pixel-perfect.js';

```

You can then call `makePixelPerfect` on any `` or `` element.

For example:

```js

import {makePixelPerfect} from './pixel-perfect.js';

function makeAllPixelPerfect() {

  document.querySelectorAll(".pixel-perfect").forEach(makePixelPerfect);

}

window.addEventListener('resize', makeAllPixelPerfect);

makeAllPixelPerfect();

```

## License

MIT