Comment puis-je imprimer une image dans une page web, adapté à la taille de papier (A3, A4, A5, etc)?

Je suis actuellement en utilisant IE9 et les demandes des médias et je n'ai pas besoin d'avoir ce travail à partir d'autres navigateurs.

J'ai essayé en utilisant un ensemble de règles comme:

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

//... règles pour correspondre à la millimiters de tous les formats (A0, A1, A2, etc) y compris les marges et la tolérance

/* 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;
    }
}

//...

il semble fonctionner, mais il n'est pas fiable parce que la taille de la hauteur et de la largeur des valeurs transmises à la CSS semble dépendre de l'imprimante, même si le format A4 est toujours sélectionné.

Ce que je veux poser est de savoir si il y a un autre moyen pour obtenir le même résultat (le montage de l'image sur une page en fonction de la taille du papier).

Vous en remercie d'avance.

OriginalL'auteur ChaSIem | 2012-09-11

  1. 2

    Le long et le court de l'imprimerie à savoir est que vous ne serez jamais en mesure de contrôler avec précision ce genre de choses.

    Physiquement, des imprimantes, des capacités différentes quand il s'agit de la façon dont une grande partie de la page est de la zone imprimable. Ensuite, vous avez à traiter avec tous les paramètres que IE se souvient de la dernière page de l'utilisateur imprimé, telles que le zoom, les marges, les pages par page, etc.

    Après avoir lutté avec cela pendant des années, j'ai finalement renoncé à tenter le contrôle de ce que IE ne avec des pages à imprimer et a commencé à traiter mes feuilles de style d'impression plus comme des suggestions.

    IE < 9 simplement ne supporte pas de saut de page ou @page de façon significative et, dans mes tests IE9 simplement ignore presque tous @page des règles en faveur de ce que les paramètres de l'utilisateur dernier configuré.

    Suggérer que IE imprimer une image sur toute la largeur et toute la hauteur de la page d'essayer de répondre L'impression en mode paysage à partir de l'HTML

    coller c'est à dire est horrible
    Ouais, eh bien, la question stipule clairement un navigateur cible, de sorte que l'évangélisation pour les autres produits serait assez hors sujet, n'est-ce pas? Aussi, cette question est si vieux lol
    De ne pas soutenir n'importe quel autre navigateur, mais juste pour exprimer la douleur de faire tout OK avec IE...
    Eh bien, je pense que nous avons maintenant. Juste pour dire que c'est un endroit pour les réponses constructives aux questions posées. Je suis sûr que les "Nous de la haine c'est à dire" groupe de soutien serait mieux en le tenant des réunions de ailleurs.
    Vous gagnez, je cesser de fumer. Espérons que vous êtes heureux maintenant

    OriginalL'auteur Reid Johnson

  2. 1

    Vous pouvez toujours le faire:

    Créer un nouveau fichier CSS qui contient uniquement le CSS que vous souhaitez appliquer lors de l'impression.

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

    Alors vous pouvez vous relier à votre html doc:

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

    Je ne suis pas à 100% sur le "display: block;", vous devrez peut-être essayer de jouer avec d'autres valeurs pour "bloquer". Je n'ai pas testé, mais si vous le faites, laissez-moi savoir si cela fonctionne!

    Je sais que l'aide (media="print") vous permettra de séparer le css pour l'impression, et vous pouvez jouer avec elle à partir de là.

    OriginalL'auteur Derek Bourgeois

  3. 0

    Ressemble à ce pourrait être un travail pour saut de page:

    .img_port {
    height: 267mm !important;  /* might also try height: 100%; */
    page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid;
}
    Je ne peux pas utiliser une hauteur fixe car je ne sais pas quelle est la taille du papier.

    OriginalL'auteur Sean Vieira

  4. 0

    Il n'est pas tout fiable façon de le faire autant que je sache.

    Nous laissons à l'utilisateur de choisir la taille de la page/de l'orientation et de generer un PDF de la taille de l'image. En fait, vous pouvez générer une chaîne hi-res (plus grand) l'image pour obtenir une meilleure impression de DPI et de l'adapter à la page.

    OriginalL'auteur Peter Ivan

  5. -1

    Si vous utilisez pagebreak il affiche une page vide.

    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 */
}
    Ce n'est pas de travail pour moi. hauteur de 100% n'est pas de travail. Largeur de 100% ne fonctionne que si l'image peut être contenue dans une page qui a la même orientation (par exemple paysage format A4 avec une photo de paysage avec un aspect ratio de 1,41). À l'aide de CSS avec un portrait de l'image, imprimée dans un paysage de page ne correspondent pas à la hauteur, mais la largeur et l'image est ensuite coupées.

    OriginalL'auteur Web Designer cum Promoter