我创建了一个 100%（浏览器）宽度的 HTML 页面，其中包含很多内容。内容在页面中是固定的，其大小均以像素和百分比为单位。
现在我需要添加20%浏览器宽度的广告面板。并且想要将页面容器及其所有内容（包括文本）缩放至 80%（就像所有网络浏览器中可用的缩放一样，但它应该是内部缩放）。
不幸的是我的页面是没有反应我不想重新开发它或从头开始调整其所有内容的大小。
HTML 中有可用的缩放功能吗？
您可以使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
