Rescale images to physical points

align-to-physical-point-from-150-percent-scale.user.css

/*
Crisp up-scaled images on display with 150% DPI scale factor
Prevents blurry antialised edges between picture sampling areas.

"DPI Zoom (scale) factor" can be obtained with JavaScript:

window.devicePixelRatio

for 150% DPI scale factor at page with 100% zoom level this should be 1.5

min zoom is 30 %
max zoom is 300 %

[ctrl] + [mouse wheel] modifies DPI consistently by +- 10 %.

[ctrl] + [+ / -] modifies DPI in prefefined values - powers of 10 % with two exceptions: 30, 50, *67*, 80, 90, 100, 110, 120, *133*, 150, 170, 200, 240, 300. Those exceptions and derived values [1] are not in scope of this stylesheet. 

[1] in theory combining wheel and keyboard zoom one could possibly get 30, *33*, *37*, 40, *43*, *47*, 50 (...) zoom factors.

a.k.a. resolution value for media query
this file expects "normal" scale factor to be *150%*
what normally causes ugly blurry "scaled down" images
this style undoes that scale so that image pixels are mapped to physical pixels and antialising is supressed
producing crisp scaled image in "100% zoom" and controls resizing to maintan crispness and predictable dimension
*/


/*
100% page zoom
1 = __ monitor scale × __ transform scale to "undo"
1 = 1.25 × 0.8
1 = 1.5 × 0.6666666666666
1 = 2 × 0.5
strangemesses:
?? __ page zoom at monitor set to __ scale is matched by `(resolution: __)`
!! 90% 100% 0.895522445440292259dppx
OK 50% 100% 0.5dppx
OK 100% 125% 1.25dppx
!! 100% 175% 1.76470595598220835dppx

centering crisp image of odd dimesion would produce unwanted "notch" from rounding
drawbacks: 
- zooming is funky: apparently "zoom" is done by ajdusting DPI factor, so sometimes some of our rules hits

[width][height] = image fits viewport
*/


@media
(resolution: 0.75dppx),
(resolution: 0.8955223880597015dppx),
(resolution: 1.0526315789473684dppx),
(resolution: 1.2dppx),
(resolution: 1.3636363636363635dppx),
(resolution: 1.50dppx),
(resolution: 1.6666666666666667dppx),
(resolution: 1.8181818181818181dppx),
(resolution: 1.935483870967742dppx),
(resolution: 2.0689655172413794dppx),
(resolution: 2.00dppx),
(resolution: 2.2222222222222223dppx),
(resolution: 2.4dppx),
(resolution: 2.50dppx),
(resolution: 2.727272727272727dppx),
(resolution: 2.857142857142857dppx),
(resolution: 2.857142857142857dppx),
(resolution: 3.00dppx),
(resolution: 3.1578947368421053dppx),
(resolution: 3.3333333333333335dppx),
(resolution: 3.5294117647058822dppx),
(resolution: 3.3333333333333335dppx),
(resolution: 3.5294117647058822dppx), /* twice ?! */
(resolution: 3.75dppx),
(resolution: 4.00dppx),
(resolution: 4.285714285714286dppx),
(resolution: 4.615384615384615dppx)
{
	html>body>img:only-child:not([width]):not([height]) {
		image-rendering: var(--image-rendering, -moz-crisp-edges);
		transform: scale(calc(var(--scale-to) / var(--dppx)));
		transform-origin: top left;
		margin: 0;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
	}
	/*
	debug
	*/
	html::after {
		content: 'dppx: ' var(--dppx-debug) ' scale: ' var(--scale-to-debug) '×' ' assumed zoom level: ' var(--zoom-debug);
		position: fixed;
		top: 0;
		right: 0;
		color: #ccc;
		background-color: rgba(0,0,0,0.5)
	}
}

@media (resolution: 0.75dppx) {
	:root {
		--zoom-debug: '50%';
		--dppx: 0.75;
		--dppx-debug: '0.75';
		--scale-to: 0.0625;
		--scale-to-debug: '0.0625';
		--image-rendering: auto;
	}
}

@media (resolution: 0.8955223880597015dppx) {
	:root {
		--zoom-debug: '60%';
		--dppx: 0.8955223880597015;
		--dppx-debug: '0.8955223880597015';
		--scale-to: 0.125;
		--scale-to-debug: '0.125';
		--image-rendering: auto;
	}
}

@media (resolution: 1.0526315789473684dppx) {
	:root {
		--zoom-debug: '70%';
		--dppx: 1.0526315789473684;
		--dppx-debug: '1.0526315789473684';
		--scale-to: 0.25;
		--scale-to-debug: '0.25';
		--image-rendering: auto;
	}
}

@media (resolution: 1.2dppx) {
	:root {
		--zoom-debug: '80%';
		--dppx: 1.2;
		--dppx-debug: '1.2';
		--scale-to: 0.5;
		--scale-to-debug: '0.5';
		--image-rendering: auto;
	}
}

@media (resolution: 1.2dppx) {
	:root {
		--zoom-debug: '80%';
		--dppx: 1.2;
		--dppx-debug: '1.2';
		--scale-to: 0.5;
		--scale-to-debug: '0.5';
		--image-rendering: auto;
	}
}

@media (resolution: 1.3636363636363635dppx) {
	:root {
		--zoom-debug: '90%';
		--dppx: 1.3636363636363635;
		--dppx-debug: '1.3636363636363635';
		--scale-to: 1;
		--scale-to-debug: '1';
	}
}

@media (resolution: 1.50dppx) {
	:root {
		--zoom-debug: '100%';
		--dppx: 1.50;
		--dppx-debug: '1.50';
		--scale-to: 2;
		--scale-to-debug: '2';
	}
}

@media (resolution: 1.6666666666666667dppx) {
	:root {
		--zoom-debug: '110%';
		--dppx: 1.6666666666666667;
		--dppx-debug: '1.6666666666666667';
		--scale-to: 3;
		--scale-to-debug: '3';
	}
}

@media (resolution: 1.8181818181818181dppx) {
	:root {
		--zoom-debug: '120%';
		--dppx: 1.8181818181818181;
		--dppx-debug: '1.8181818181818181';
		--scale-to: 4;
		--scale-to-debug: '4';
	}
}

@media (resolution: 1.935483870967742dppx) {
	:root {
		--zoom-debug: '130%';
		--dppx: 1.935483870967742;
		--dppx-debug: '1.935483870967742';
		--scale-to: 5;
		--scale-to-debug: '5';
	}
}

@media (resolution: 2.00dppx) {
	:root {
		--zoom-debug: '133%';
		--dppx: 2.00;
		--dppx-debug: '2.00';
		--scale-to: 6;
		--scale-to-debug: '6';
	}
}

@media (resolution: 2.0689655172413794dppx) {
	:root {
		--zoom-debug: '140%';
		--dppx: 2.0689655172413794;
		--dppx-debug: '2.0689655172413794';
		--scale-to: 7;
		--scale-to-debug: '7';
	}
}

@media (resolution: 2.2222222222222223dppx) {
	:root {
		--zoom-debug: '150%';
		--dppx: 2.2222222222222223;
		--dppx-debug: '2.2222222222222223';
		--scale-to: 8;
		--scale-to-debug: '8';
	}
}

@media (resolution: 2.4dppx) {
	:root {
		--zoom-debug: '160%';
		--dppx: 2.4;
		--dppx-debug: '2.4';
		--scale-to: 9;
		--scale-to-debug: '9';
	}
}

@media (resolution: 2.50dppx) {
	:root {
		--zoom-debug: '170%';
		--dppx: 2.50;
		--dppx-debug: '2.50';
		--scale-to: 10;
		--scale-to-debug: '10';
	}
}

@media (resolution: 2.727272727272727dppx) {
	:root {
		--zoom-debug: '180%';
		--dppx: 2.727272727272727;
		--dppx-debug: '2.727272727272727';
		--scale-to: 11;
		--scale-to-debug: '11';
	}
}

@media (resolution: 2.857142857142857dppx) {
	:root {
		--zoom-debug: '190%';
		--dppx: 2.857142857142857;
		--dppx-debug: '2.857142857142857';
		--scale-to: 12;
		--scale-to-debug: '12';
	}
}

@media (resolution: 3.00dppx) {
	:root {
		--zoom-debug: '200%';
		--dppx: 3.00;
		--dppx-debug: '3.00';
		--scale-to: 13;
		--scale-to-debug: '13';
	}
}

@media (resolution: 3.1578947368421053dppx) {
	:root {
		--zoom-debug: '210%';
		--dppx: 3.1578947368421053;
		--dppx-debug: '3.1578947368421053';
		--scale-to: 14;
		--scale-to-debug: '14';
	}
}

@media (resolution: 3.3333333333333335dppx) {
	:root {
		--zoom-debug: '220%';
		--dppx: 3.3333333333333335;
		--dppx-debug: '3.3333333333333335';
		--scale-to: 15;
		--scale-to-debug: '15';
	}
}

@media (resolution: 3.5294117647058822dppx) {
	:root {
		--zoom-debug: '230% or 240%';
/*
for some mysterious reason both zoom levels matches this resolution
*/
		--dppx: 3.5294117647058822;
		--dppx-debug: '3.5294117647058822';
		--scale-to: 16;
		--scale-to-debug: '16';
	}
}

@media (resolution: 3.75dppx) {
	:root {
		--zoom-debug: '250%';
		--dppx: 3.75;
		--dppx-debug: '3.75';
		--scale-to: 17;
		--scale-to-debug: '17';
	}
}

@media (resolution: 4.00dppx) {
	:root {
		--zoom-debug: '260% or 270%';
/*
for some mysterious reason both zoom levels matches this resolution
*/
		--dppx: 4.00;
		--dppx-debug: '4.00';
		--scale-to: 18;
		--scale-to-debug: '18';
	}
}

@media (resolution: 4.285714285714286dppx) {
	:root {
		--zoom-debug: '280% or 290%';
/*
for some mysterious reason both zoom levels matches this resolution
*/
		--dppx: 4.285714285714286;
		--dppx-debug: '4.285714285714286';
		--scale-to: 19;
		--scale-to-debug: '19';
	}
}

@media (resolution: 4.615384615384615dppx) {
	:root {
		--zoom-debug: '300%';
		--dppx: 4.615384615384615;
		--dppx-debug: '4.615384615384615';
		--scale-to: 20;
		--scale-to-debug: '20';
	}
}

probe.png.datauri.txt

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQAAAABRBrPYAAAC/ElEQVR4AWKo/48dPGBAAftxKHuPquc+DmUvwIYwQsxSYAAwXse2EQAhFAVLp7QthRJwRoCWdeLElk4e4hHp1ytjbWyMXWNr7IWxYyyNlbE2NsausTX2wtgxlsbKWBsbY9fYGnth7BhLY2WsjY2xa2yNvTB2jKWxMtbGxtg1tsZeGDvG0lgZa2Nj7BpbYy+MHWNprIz1PyP+w8a+XWNr7IWxYyyNlbE2NsausTX2wtgxlsbKWBsbY9fYGnth7BhLY2WsjY2xa2yNvTB2jKWxMtbGxtg1tsZeGDvG0lgZa2Nj7BpbYy+MHWNprIy1sTF2je1/I/5z8anrf7NPkf/1m6WxMtbGxtg1tsZeGDvG0lgZa2Nj7BpbYy+MHWNprIy1sTF2ja2xF8aOsTRWxtrYGLvG1tgLY8dYGitjbWyMXWNr7IWxYyyNlbE2NsausTX2wtgxlsbKWBsbY9fYGnth7BhLY2WsjY2xa2yNvTB2jKWxMtbGxtg1tsZeGDvG0lgZa2Nj7BpbYy+MHWNprP6wb61CAYiAQ1OGCgBs0DENgDAABEAd6KgA3BQNLFRHJww1wQUGmEgIIODPwA03dcWFNkbESau1IS60q8yIC23te8RBe8YRcdC2uigu3kqJOGitIw4a4qSdiIOGOGk34qAhTtqLOGiIk/YhTprioCkOmuKgKQ6a4qApDprioDEOmuKgKQ6a4qApDprioCkOmuKgKU4a4qQhThripCFOGuKkIU4a4qQhDhrioCEOGuKoIQ4a4qghDhriqCEOGuKoIQ4a4qghDhriqCEOGuKoMe6ngw4JAABgIAhVXrRFfH2CAgigNY5a46g1jlrjqDWOWuOoNY5a46w1jlrjqDWOWuOoJc5a4qwlzlrjrCXOWuKsJc5a4qwlzlrirCXOWuOsJc5a4qwlzlrirCXOWuKsJc5a4qwlzlrirCXOWuKsJc5a4qwlzlrirCXOWuKsJc5a4qwlzlrirCXOWuKsJc5a4qwl7qgl7qVtqOACPtMQ4AEAXK5s6gzzzEcAAAAASUVORK5CYII=