如何將容器 div 及其所有內容縮放到特定大小？

Question

我創建了一個 100%（瀏覽器）寬度的 HTML 頁面，其中包含很多內容。 內容在頁面中是固定的，它們的大小都以像素和百分比為單位。
現在我需要添加 20% 瀏覽器寬度的廣告面板。 並且想要將頁面容器及其所有內容包括文本縮放到 80% （就像所有 Web 瀏覽器中可用的縮放一樣，但它應該是內部縮放）。
不幸的是，我的頁面沒有響應，我不想重新開發它或從頭開始調整其所有內容的大小。
HTML 中有任何可用的縮放工具嗎？

Answer 1

您可以使用 css 變換屬性

     transform: scale(0.1);
     transform-origin: 0% 0% 0px;

看看我創建的縮放功能

 function setZoom(zoom,el) { transformOrigin = [0,0]; el = el || instance.getContainer(); var p = ["webkit", "moz", "ms", "o"], s = "scale(" + zoom + ")", oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%"; for (var i = 0; i < p.length; i++) { el.style[p[i] + "Transform"] = s; el.style[p[i] + "TransformOrigin"] = oString; } el.style["transform"] = s; el.style["transformOrigin"] = oString; } //setZoom(5,document.getElementsByClassName('container')[0]); function showVal(a){ var zoomScale = Number(a)/10; setZoom(zoomScale,document.getElementsByClassName('container')[0]) }

 .container{ width:500px; height:500px; background:blue; }

 <input id="test" min="1" max="10" value='10' step="1" onchange="showVal(this.value)" type="range"/> <div class="container"> </div>

Answer 2

我曾嘗試使用純 HTML、CSS 和 Javascript 來制作放大和縮小功能，看看吧。 s

https://codepen.io/ghewadesumit/pen/poJEYVG?editors=1111