这有点怪异,但似乎Webkit(至少在最新的稳定版Chrome中)支持Microsoft的
zoom资产。好消息是它的行为更接近您想要的。
不幸的是,DOM
clientWidth和类似的属性仍然返回原始值,就好像图像未调整大小一样。
// hack: wait a moment for img to loadsetTimeout(function() { var img = document.getElementsByTagName("img")[0]; document.getElementById("c").innerHTML = "clientWidth, clientHeight = " + img.clientWidth + ", " + img.clientHeight;}, 1000);img { zoom: 50%;}#t { width: 400px; height: 300px; background-color: #F88;}#s { width: 200px; height: 150px; background-color: #8F8;}<img /><div id="s">div with explicit size for comparison 200px by 150px</div><div id="t">div with explicit size for comparison 400px by 300px</div><div id="c"></div>


