如何以实际大小的80％</div>显示HTML <div>的副本

Question

我希望将<div>的所有内容显示为预览，这意味着我必须再次创建具有不同宽度高度值的相同<div>元素和图像（例如背景图像） ）同时减小尺寸。

有一种简单的方法吗？或者我是否必须为此创建新图像和新的HTML代码？

修改

我尝试了CSS zoom属性，该属性仅适用于IE和Chrome 8.我需要它才能在所有常见浏览器上运行：FF，Opera，Safari，Chrome和IE。

由于

Answer 1

这可能只适用于具有IE特定“缩放”属性的Internet Explorer。

对于其他浏览器，您可以轻松调整元素，字体，图像，对象的大小，但不能调整背景图像的大小。对于背景图像，您将需要一组实际调整大小的图像。

Answer 2

您是否尝试过应用将所有内容都设为80％的样式？例如：

.preview, .preview * {
  font-size: 80%;
  height: 80%;
  width: 80%;
}

Answer 3

我认为在CSS中有一种简单的方法可以做到这一点。新的background-size属性可能对背景图像有所帮助，但它尚未得到广泛支持。

“最简单”的方式（其中“简单”意思是“涉及您编写最少量的复杂代码”）将使您想要预览的HTML和CSS由实际浏览器的渲染引擎呈现，以及将该渲染保存为图像。

不确定这是否适用于您正在使用的上下文中。

Answer 4

用父div包装div，然后给父div赋予静态宽度和高度，然后将％width和height设置为目标div。