print css：适合一页

Question

在我的页面中只有一张图片。种类1500x3000像素。
在打印机中，我需要将此图像的最大宽度设置为页面的宽度，所以我做了：在css中宽度为100％，并且它可以工作。
但高度......高度100％的旧废话永远不会奏效。因为它总是100％的父容器，所以某人必须定义高度。或者html或者身体。
所以，我的问题是：使这个图像适合一页。
有什么想法吗？

Answer 1

执行此操作的一种方法是执行一些计算以找出导致长度恰好为一页的宽度，然后相应地在CSS中设置宽度。

Answer 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>

Answer 3

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

我最终做的是假设99％的客户（这是真的）他们使用单页大小。所以我在打印界面中发出了一些警告，只能使用页面大小“X”。太糟糕了。但它到目前为止还在努力

Answer 4

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

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

顺便说一下，我曾希望设置page-break-inside以避免在主体或容器元素上进行限制，这可能是限制单个打印页面的解决方案，但这似乎根本没有任何影响。< / p>