打印 css：适合一页

Posted 2023-02-23

【中文标题】打印 css：适合一页

【英文标题】：print css: fit in one page

【发布时间】：2010-03-12 18:53:36

【问题描述】：

在我的页面中只有一张图片。 1500x3000 像素的种类。 在打印机中，我需要这个图像的最大宽度是页面的宽度，所以我做了：css 中的宽度为 100%，它可以工作。 但是身高……100%身高的老废话永远行不通。因为它总是 100% 的父容器，所以必须有人定义高度。或html或正文。 所以，我的问题是：让这张图片适合一页。 有什么想法吗？

【参考方案1】：

一种方法是执行一些计算以找出什么宽度会导致长度正好是一页，然后在 CSS 中相应地设置宽度。

【讨论】：

嗯，我做到了。我设置了宽度：100%，但这还不足以让页面高度适合页面，因为页面大小有很多变化......

【参考方案2】：

如果我理解正确，你能做到吗

.OnePageImage  height: 100%; width: 600px; 

其中 600px（宽度）是页面的总宽度。然后图像将适合一页（尽管可能有一些失真）。您还可以在图像前后的 div 中添加 css 分页符样式，如下所示：

.break  page-break-after:always; 

那么代码将如下所示：

<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>

【讨论】：

好吧，它也对我不起作用。我最终所做的是假设 99% 的客户（这是真的）他们使用单一页面大小。所以我在打印界面中放了一些警告，只适用于页面大小“X”。太糟糕了。但到目前为止效果很好

感谢***.com/questions/61598973/…的帮助

【参考方案3】：

好的，很抱歉将“解决方案”作为评论：

我最终所做的是假设 99% 的客户（这是真的）他们使用单一页面大小。所以我在打印界面中放了一些警告，只适用于页面大小“X”。太糟糕了。但到目前为止一切正常

【参考方案4】：

对我来说，将打印输出限制为单个页面的唯一方法是将包装整个页面的容器元素的高度（以厘米为单位）设置，并将其溢出设置为隐藏。由于某种原因，这似乎不适用于 body 元素。

body > section 
    padding:0 !important;
    margin:0 !important;
    height:25.7cm !important;
    overflow:hidden !important;

顺便说一句，我曾希望将 page-break-inside 设置为避免在正文或容器元素上可能是限制为单个打印页面的解决方案，但这似乎根本没有任何效果。