图像在打印预览中得到调整

我在网页上有几个图像（不是背景图像），当我看到100％缩放比例的打印预览时，图像看起来不错，但是我的问题是当我用缩小到合适的比例尺，所有的图像都会比实际尺寸小。我没有在IMG标签上提供任何宽度或高度属性，所以我假设在打印预览中它将加载，因为它们出现在屏幕上。我用下面的CSS为IMG印刷媒体，但它没有工作图像在打印预览中得到调整

img {max-width:100%; }

我期待在缩小同一图像的尺寸以配合和100％的比例。

这可能吗？我在打印CSS错过了什么？请指教。

来源

2012-10-04 Kalish

使用特定于打印的'@media queries'或'media =“print”'样式表 –

@ Mr.Alien - 我已经有一个打印CSS，上面的规则也在其中。 – Kalish

不要使用'max-width'尝试只使用'width' –

你有'容器'或'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; 
    } 
}

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

来源

2016-06-02 06:14:16

图像在打印预览中得到调整

回答

相关问题