Question

我的网页上有几张图片（不是背景图片），当我看到100％比例的打印预览时，图像看起来很好，但我的问题是，当我使用Shrink进行打印prview以适应比例时，所有图像比实际尺寸小。我没有在IMG标签上提供任何宽度或高度属性，因此我假设在打印预览中它将在屏幕上显示时加载。我已经使用下面的css作为IMG的打印介质，但它不起作用

img {max-width:100%; }

我希望Shrink中的图像尺寸与100％相同。

这可能吗？我在print css中遗漏了什么吗？请指教。

Answer 1

你有'容器'或'div'等图像吗？你应该为它们创建印刷样式，而不仅仅是img元素。

我建议在你的元素上使用相同的样式进行屏幕和打印，就像这样（这是我的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;
    }
}

希望有所帮助，祝你好运。

Answer 2

在处理项目时，当我需要在打印预览中获取图像的原始大小时，必须使用!important.，否则，它不会覆盖最初为页面上的图像定义的样式。

我还必须修改图像容器的高度：

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

Answer 3

你也可以试试这个。

<img class="application-logo res-media" width="65" height="65">


@media screen {
    .application-logo{
        width: 65px !important;
        height: 60px !important;
        cursor: pointer;
        margin: 25px;
    }
}

@media print {
    .application-logo, ._imgcont, img {
        max-height: none !important;
        height: 65px !important;
    }
}

图像在打印预览中调整大小

3 个答案: