CSS - максимальная высота не работает для печати изображения

0

Я создал веб-приложение, где вы можете нарисовать изображение. Когда вы печатаете веб-сайт, должно быть только изображение, и оно должно использовать как можно больше места на одной странице.

Моя проблема: если изображение намного превышает ширину, оно по-прежнему использует полную ширину, а нижний край обрезается или находится на второй странице! Firefox также отсекает около 2% изображения на правом краю. Как решить эту проблему с помощью css? Или это возможно только с JavaScript?

@media print {

  #content {
    display:none;
  }

  #canvas {
    position:absolute;
    max-width:100%;
    max-height:100%;
    margin:0px;
  }
}

Здесь мой JSFiddle: http://jsfiddle.net/Gh28n/6/

  • 0
    Вы пытались установить ширину: 100%; и высота: авто; ?
  • 0
    Теперь у меня есть; это не работает!
Показать ещё 3 комментария
Теги:

1 ответ

0

Хитрость заключается в том, чтобы установить фиксированное с таким большим размером, которое может поместиться в любую бумагу, и установить максимальную ширину на 100%, чтобы она всегда уменьшалась, а высота - авто, чтобы поддерживать соотношение сторон, например:

    #canvas {
        width: 9999em;
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

Что касается отсечения на краю, удаление position: absolute исправление.

изменение: добавлено max-height: 100%;

  • 0
    не работает! Изображение уменьшается до размера страницы, но соотношение сторон теряется: каждое изображение печатается с высотой ровно 100% и шириной ровно 100%!
  • 0
    Ах, я экспериментировал только со сплошным холстом - есть ли у вас возможность поэкспериментировать? Я предполагаю, что это будет работать, если вы учитываете переменное соотношение сторон в своем коде canvas: вам все равно нужно это делать, поскольку элемент canvas не имеет внутренних измерений, основанных на содержимом, как это имеет элемент <img>.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню