Я создал веб-приложение, где вы можете нарисовать изображение. Когда вы печатаете веб-сайт, должно быть только изображение, и оно должно использовать как можно больше места на одной странице.
Моя проблема: если изображение намного превышает ширину, оно по-прежнему использует полную ширину, а нижний край обрезается или находится на второй странице! 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/
Хитрость заключается в том, чтобы установить фиксированное с таким большим размером, которое может поместиться в любую бумагу, и установить максимальную ширину на 100%, чтобы она всегда уменьшалась, а высота - авто, чтобы поддерживать соотношение сторон, например:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
Что касается отсечения на краю, удаление position: absolute
исправление.
изменение: добавлено max-height: 100%;