распечатать css: поместиться на одной странице - PullRequest
Новая
       32

распечатать css: поместиться на одной странице

11 голосов
/ 12 марта 2010

На моей странице только одно изображение. Вид 1500x3000 px.
В принтере мне нужно, чтобы максимальная ширина этого изображения была шириной страницы, поэтому я сделал: ширина 100% в CSS, и это работает.
Но высота ... старая фигня высоты 100% никогда не сработает. Поскольку это всегда будет 100% родительского контейнера, то кто-то должен иметь определенную высоту. Или HTML или тело.
Итак, мой вопрос: сделать так, чтобы это изображение помещалось на одной странице.
Есть идеи?

Ответы [ 4 ]

3 голосов
/ 12 марта 2010

Один из способов сделать это - выполнить некоторые вычисления, чтобы выяснить, какая ширина приведет к длине ровно одной страницы, а затем соответственно установить ширину в CSS.

0 голосов
/ 24 апреля 2013

Единственной вещью, которая ограничивала вывод печати одной страницей для меня, была установка высоты в см элемента контейнера, который обернул всю страницу, а также установление скрытого переполнения. По какой-то причине это не сработало для элемента body.

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

Между прочим, я надеялся, что установка разрыва страницы, чтобы избежать на теле или элементе контейнера, могла быть решением ограничения одной страницы печати, но это, похоже, не имеет никакого эффекта.

0 голосов
/ 12 февраля 2011

Хорошо, извините за добавление «решения» в качестве комментария:

В итоге я предположил, что 99% клиентов (это правда) используют один размер страницы. Поэтому я добавил предупреждение в интерфейс печати, которое будет работать только с размером страницы «X». очень плохо. но пока получается

0 голосов
/ 09 мая 2010

Если я правильно понимаю, не могли бы вы сделать 

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

Где 600px (ширина) - это общая ширина страницы.Тогда изображение поместится на одной странице (хотя, возможно, с некоторыми искажениями).Вы также можете добавить стиль разрыва страницы css к div до и после изображения, что делается следующим образом: 

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

Тогда код будет выглядеть так: 

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