Bilder werden immer verkleinert in der seitenansicht

Ich habe mehrere Bilder(nicht Hintergrundbild) auf meiner Webseite, Wenn ich die seitenansicht auf 100% skalieren, Bilder sieht gut aus, aber Mein problem ist, dass wenn ich eine print-prview mit Shrink to fit Skala an, alle Bilder kommen, die kleiner als die tatsächliche Größe. Ich habe nicht geliefert, jede Breite oder height-Attribut im IMG-tag, also gehe ich davon aus, dass in der seitenansicht wird es zu laden, wie Sie auf dem Bildschirm erscheinen. Ich habe folgenden von css für print-Medien für die IMG -, aber es hat nicht funktioniert

img {max-width:100%; }

Ich erwarte das gleiche Bild-dimension Schrumpfen zu passen und 100% - Skala.

Ist das möglich? bin ich etwas fehlt in print-css? Bitte um Rat.

verwenden Sie das drucken bestimmter @media queries oder media="print" stylesheet
Ich habe bereits ein print-css-Datei mit der oben genannten Regel auch.
verwenden Sie nicht max-width versuchen Sie es mit nur width

InformationsquelleAutor Kalish | 2012-10-04

  1. 1

    Haben Sie Ihre Bilder im 'container' oder 'div' etc? erstellen Sie print-Stil für Sie auch nicht nur für die img-Elemente.

    Ich würde vorschlagen, um mit dem gleichen Stil auf Ihre Elemente sowohl für Bildschirm und Druck , etwa so(das ist meine print.css):

    /*How they look like on the print preview*/
@media print {
    #poweredbyLogo{
        width:213px;
    }
    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }

    .col-md-6.a1{
        background-color: #0000f6!important;
    }
    .col-md-6.a2{
        background-color: #d3d3d3!important;
    }
}
/*How they look like on the screen*/
@media screen {
    #poweredbyLogo{
        width:47%;
    }

    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }
}

    Hoffe das hilft, viel Glück.

    InformationsquelleAutor Theo Itzaris

  2. 1

    Während der Arbeit an meinem Projekt, wenn ich brauchte, um die ursprüngliche Größe des Bildes in der seitenansicht, musste ich !important. Sonst wäre es nicht überschreiben die style definiert zunächst für das Bild auf der Seite.

    Hatte ich auch zum ändern der Höhe der Bild-Container:

    @media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}

    InformationsquelleAutor bakrall

Schreibe einen Kommentar