Print css: вставить в одну страницу

На моей странице есть только одно изображение. Вид 1500x3000 px.

В принтере мне нужно, чтобы эта максимальная ширина изображения была шириной страницы, поэтому я сделал: ширина 100% в css, и она работает.

Но высота... старое дерьмо высотой 100% никогда не будет работать. Поскольку он всегда будет на 100% от родительского контейнера, тогда кто-то должен иметь определенную высоту. Или html или тело.

Итак, мой вопрос: сделайте этот образ подходящим на одной странице.

Любые идеи?

ОТВЕТЫ

Ответ 1

Хорошо, извините за то, что "решение" в качестве комментария:

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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