print css：適合一頁

在我的頁面裏只有一張圖片。種類1500x3000像素。
在打印機中，我需要將此圖像的最大寬度設置爲頁面的寬度，所以我做了：在css中寬度爲100％，並且工作正常。
但高度......高度100％的舊廢話絕對不會奏效。因爲它始終是父容器的100％，所以有人必須定義高度。或者html或body。
所以，我的問題是：讓這張圖片適合一個頁面。
任何想法？print css：適合一頁

來源

2010-03-12 bluefoot

爲把好對不起你也可以前後的圖像，這是這樣做之後添加CSS分頁樣式一個div 「解決方案」作爲評論：

我最終做的是假設99％的客戶（這是真的）他們使用單一頁面大小。所以我在打印界面中加入了一些警告，該界面只適用於頁面大小「X」。太糟糕了。但它運行到目前爲止

來源

2011-02-12 18:16:36 bluefoot

做到這一點的一種方法是執行一些計算來找出什麼寬度會導致長度恰好是一頁，然後相應地在CSS中設置寬度。

來源

2010-03-12 19:01:46

eyah，我做到了。我把寬度：100％，但這不足以適應頁面上的高度，因爲頁面大小的衆多變化...... – bluefoot 2010-03-14 12:58:26

如果我沒有理解這個權利，你可以做

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

凡600px的（寬度）頁面的總寬度。然後圖像將適合在一個頁面上（儘管可能有一些失真）。

.break { page-break-after:always; }

然後代碼是這樣的：

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

來源

2010-05-08 23:32:06 theJerm

好吧，它也不適用於我。我最終做的是假設99％的客戶（這是真的）他們使用單頁面大小。所以我在打印界面中加入了一些警告，該界面只適用於頁面大小「X」。太糟糕了。但到目前爲止它已經行得通 – bluefoot 2010-12-30 10:32:46

將打印輸出限制爲單個頁面的唯一方法是將包裝整個頁面的容器元素的高度設置爲cm，並將其設置爲隱藏溢出。出於某種原因，這似乎不適用於身體元素。

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

順便說一句，我曾希望設置分頁-內，避免在身體上或容器元素可能已經解決限制到一個單一的打印頁面，但似乎並未有任何影響。

來源

2013-04-24 14:56:51 atomless

print css：適合一頁

回答

相關問題