2

Web ページに複数の画像 (背景画像ではない) があります。印刷プレビューを 100% の縮尺で表示すると、画像はきれいに見えますが、縮尺に合わせて縮小して印刷プレビューを実行すると、すべての画像が表示されるという問題があります。実際のサイズよりも小さい。IMG タグに幅または高さの属性を指定していないため、印刷プレビューでは画面に表示されるとおりに読み込まれると想定しています。IMG の印刷メディアに以下の CSS を使用しましたが、機能しませんでした

img {max-width:100%; }

シュリンクで同じ画像サイズが収まり、100% スケールされることを期待しています。

これは可能ですか？print cssに何か不足していますか? ご意見をお聞かせください。

4

3 に答える 3

4

プロジェクトに取り組んでいるときに、印刷プレビューで元のサイズの画像を取得する必要があるときに!important.、ページ上の画像に対して最初に定義されたスタイルを上書きしないようにする必要がありました。

画像コンテナーの高さも変更する必要がありました。

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}
于 2019-05-16T06:51:53.177 に答える
2

「コンテナ」や「div」などの中に画像がありますか? img 要素だけでなく、それらの印刷スタイルも作成する必要があります。

screen と print の両方の要素で同じスタイルを使用することをお勧めします (これは私の 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;
    }
}

希望は役に立ちます、頑張ってください。

于 2016-06-02T06:14:16.400 に答える