scale CSS Test

by DevWithCoffee

HTML

<input id="scale" type="range" value="100" min="70" max="150" onchange="scaleImg(this)" step="5"><br />
<b id="zoom">100</b>%<br />
<div style="red" id="red"></div>

CSS

#red{
	background:...

JavaScript

document.body.addEventListener("load",resetScale());

function scaleImg(z){
	var red=document.getElementById("red");
	var s=((192/100)*z.value);
	red.style.width=s+"px";
	red.style.height=s+"px";
	red.style.backgroundSize=s+"px";
	document.getElementById("zoom").innerHTML=z.value;
}

function resetScale(){
  var scale = document.getElementById("scale");
  scale.value = 105;
	scaleImg(scale)
}