1

我正在使用的系统将生成发票和几个 html 格式的文档。

当有人搜索此文档时，结果必须与文档的小预览一起出现。客户希望 html 文档显示在 div 中（请注意，此 div 比实际文档大小小得多），我想要实现的是在 div 中显示 html 并且内容自动调整为 div 的大小尺寸。

如果我在 div 中渲染 html，它只会添加滚动条并以其原始大小显示，我希望 html 内容适合 div 的大小。

我在一个 css 表中工作，它更改包含 div 内元素的字体、宽度、高度，但由于所有文档的 html 结构中没有真正的模式，结果不是预期的，我想知道是否有更清洁的方法可以做到这一点，也许使用 javascript 或 jquery 插件。

4

1 回答 1

3

您可以scale在 div 上使用，它会缩小其中的所有内容。

http://www.w3.org/TR/css3-transforms/是所有 CSS 转换的参考。看起来有点矫枉过正，但似乎没有一个 W3C 页面只解释规模。

无论如何，您可以使用的 CSS 是这样的：

.preview {
    width:600px; height:400px;
    -webkit-transform:scale(.25);
    -ms-transform:scale(.25);
    transform:scale(.25);
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
    border:4px solid green;
    margin:0 0 -300px 0;
}

结果看起来像http://jsfiddle.net/asxqL/4/

请注意，尽管此处的大多数测量值都乘以 0.25（例如，4px 边框显示为 1 像素宽），但元素占用的垂直空间仍然是 400 像素。这就是 -300px 的下边距出现的地方。

于 2013-07-12T07:27:01.647 回答