¿Cómo puedo imprimir una imagen en una página web, ajustando el tamaño del papel (A3, A4, A5, etc.)?

Question

Actualmente estoy usando IE9 y consultas de medios y no es necesario que funcione desde otros navegadores.

He intentado utilizar un conjunto de reglas como:

@page { 
    size: auto; 
    margin: 10mm 10mm 10mm 10mm; 
} 

... // reglas para que coincida con los millimiters de todos los formatos A (A0, A1, A2, etc.), incluyendo los márgenes de tolerancia y

/* A4 210x297 mm */ 
@media print and (min-height: 266mm) and (max-height: 288mm) and 
    (min-width: 179mm) and (max-width: 201mm) { 
    .img_port { 
     height: 267mm !important; 
    } 
} 

// ...

parece estar funcionando pero no es fiable ya que la altura y el tamaño de los valores de anchura pasado a la CSS parece depender de la impresora aunque el formato A4 se selecciona siempre .

Lo que quiero preguntar es si hay alguna otra manera posible de obtener el mismo resultado (ajustar la imagen en una página de acuerdo con el tamaño del papel).

Gracias de antemano.

Answer 1

Lo que falta impresión en IE es que nunca podrá controlar con precisión cosas como esta.

Físicamente, las impresoras tienen capacidades diferentes cuando se trata de qué parte de la página es un área imprimible. Luego, también tiene que tratar con cualquier configuración que IE recuerde de la última página que el usuario imprimió, como zoom, márgenes, páginas por página, etc.

Después de luchar con esto durante años, finalmente me he rendido intentando controlar lo que IE hace con las páginas impresas y comencé a tratar mis hojas de estilo de impresión más como sugerencias.

IE < 9 simplemente no es compatible con page-break o @page de ninguna manera significativa y, en mis pruebas, IE9 simplemente ignora casi todas las reglas @page a favor de las configuraciones que el usuario configuró por última vez.

Para sugerir que el IE imprimir una imagen en todo el ancho y la altura completa de la página de probar la respuesta Landscape printing from HTML

Answer 2

Suena como esto podría ser un trabajo para page-break:

.img_port { 
    height: 267mm !important; /* might also try height: 100%; */ 
    page-break-after: always; 
    page-break-before: always; 
    page-break-inside: avoid; 
} 

Answer 3

Si utiliza salto de página se mostrará una página vacía.

img{ 
    page-break-inside: avoid; 
    padding:0; margin:0; 
    top:0; left:0; right:0;bottom:0; border:0; 
    /*width:2480px; height:3508px!important;*/ /*a4 size */ 
    width:100%; height:100%; max-width:100% important! 
} 
.page-break { display: block; page-break-before: always; } 
@page { 
size: landscape; 
} 
@page :first { 
    margin-top: 10cm /* Top margin on first page 10cm */ 
} 

Answer 4

Siempre se puede hacer esto:

Crear un nuevo archivo CSS que contiene sólo el CSS querer aplicado al imprimir.

*{display: hidden;} 
img{display: block; width: 100%; height: 100%;} 

A continuación, puede enlazar con él en su documento html:

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" /> 

no estoy 100% en el "display: block;", puede que tenga que tratar de jugar con otra valores para "bloque". No he probado esto, pero si lo haces, ¡avísame si funciona!

Answer 5

No hay ninguna confiable forma de hacerlo AFAIK.
Permitimos que el usuario elija el tamaño/orientación de la página y genere un PDF del tamaño correcto que contiene la imagen. De hecho, puede generar una imagen de alta resolución (más grande) para obtener una mejor impresión de DPI y ajustarla a la página.