如何显示HTML副本 <div> 实际尺寸的80％

Question

我想显示一个<div>及其所有内部内容作为预览，这意味着我必须再次创建相同的<div>元素，并具有不同的宽度高度值，并且还要缩小图像（例如背景图像）。

是否有捷径可寻？ 还是我必须为此创建新图像和新HTML代码？

我尝试了仅适用于IE和Chrome 8的CSS zoom属性。我需要它在所有常见的浏览器上都可以使用：FF，Opera，Safari，Chrome和IE。

谢谢

Answer 1

只有在具有IE特定的“ zoom”属性的Internet Explorer中，才可能这样做。

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

Answer 2

您是否尝试过应用一种使div内所有内容占80％的样式？ 例如：

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

Answer 3

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

“最简单”的方式（其中“简单”的意思是“让您编写最少的复杂代码”）将是获取要预览的HTML和CSS，并由实际的浏览器渲染引擎进行渲染，并进行渲染保存为图像。

不确定是否可以在您正在使用的环境中使用。

Answer 4

用父div包裹div，然后为父div设置静态宽度和高度，然后设置目标div的宽度和高度％。