Я уменьшаю содержимое моего удивительного редактора графов, используя transform: scale(x). При масштабировании масштаб уменьшается до 0 (эксклюзивный), когда масштабирование увеличивается, до максимального значения 1 (включительно), что означает полный масштаб или начальный масштаб.
Однако при значительном увеличении масштаба качество изображения становится действительно шумным - рассмотрите следующий пример и обратите внимание на то, как масштабирование сделает шум изображения шумным:
var graphContainer = document.getElementById("graph-container");
var zoomInButton = document.getElementById("zoom-in-button");
var zoomOutButton = document.getElementById("zoom-out-button");
var zoomLevel = 1;
zoomInButton.addEventListener("click", function () {
zoomLevel = Math.max(1, zoomLevel - 0.25);
graphContainer.style.transform = "scale(" + (1 / zoomLevel) + ")";
});
zoomOutButton.addEventListener("click", function () {
zoomLevel = zoomLevel + 0.25;
graphContainer.style.transform = "scale(" + (1 / zoomLevel) + ")";
});#editor-container {
background-color: #001723;
}
#graph-container { transform-origin: top center; }<div id="editor-container">
<button id="zoom-in-button">Zoom in</button>
<button id="zoom-out-button">Zoom out</button>
<div id="graph-container">
<img class="shape" src="http://i.imgur.com/zsWkcGz.png" />
</div>
</div>