使用低分辨率图像进行屏幕，高分辨率进行打印

我希望屏幕显示使用 图像的低分辨率版本（96 dpi），以确保快速加载。但我希望打印版本能够使用高分辨率版本（300 dpi或更高）。打印页面的外观应与屏幕上的页面相同，但只需更多细节 图像。 我可以只使用CSS，@ media screen和@media打印吗？ 提前谢谢。 roger （顺便说一句，我可以使用屏幕上的不同HTML获得我想要的效果和 打印。通过设置IMG标签的宽度和高度，我强制无论它包含的图像的像素尺寸如何，它都是特定尺寸的 。 如果以这种方式缩小图像，打印质量会提高很多。 br /> 但据我所知，我不能将IMG标签设置为仅使用CSS的 打印和屏幕媒体的不同src。我也不能轻易地平铺这些图像。）Hello allI have created a page which has several pictures on it. Each picture issurrounded by a frame made from actual photos of real picture frames,consisting of four corner tiles and four repeating side tiles.I would like the on-screen display to use low-res versions (96 dpi) of theimages, to ensure fast loading. But I would like the printed version touse high-res versions (300 dpi or more). The printed page should beidentical in appearance to the on-screen page, but just with more detail inthe images.Can I do this using only CSS, with @media screen and @media print?Thanks in advance.roger(BTW, I can get the effect I want using different HTML for the screen andprint. By setting the width and height of an IMG tag, I force it to be aspecific size regardless of the pixel dimensions of the image it contains.If the image is scaled down in this way, print quality improves a lot.But to my knowledge, I cannot set the IMG tag to have a different src forprint and screen media using only CSS. Nor can I tile such images easily.)推荐答案 Roger Shrubber写道：Roger Shrubber wrote:我希望屏幕显示使用低分辨率版本（96 dpi） i法师，以确保快速装载。但我希望印刷版能够使用高分辨率版本（300 dpi或更高）。打印页面的外观应与屏幕上的页面完全相同，但图像中的细节更多。 我是否可以仅使用CSS执行此操作，使用@媒体屏幕和@media打印？ I would like the on-screen display to use low-res versions (96 dpi) of the images, to ensure fast loading. But I would like the printed version to use high-res versions (300 dpi or more). The printed page should be identical in appearance to the on-screen page, but just with more detail in the images. Can I do this using only CSS, with @media screen and @media print? 我*认为*所以（未经测试）。 使用< b来构建页面div> s为图像，为它们分配ID而没有 其他属性[1]。 在单独的打印和屏幕中，投影[2] CSS文件，将< div> 尺寸和适当的图像设置为< div>背景。 [1]除了可能是title属性，作为< img>上缺少的 alt属性的不良替代品元件。也许你可以在每个< div>中包含一个链接到 的图像。在CSS中设置为display：none。 这将允许非CSS浏览器的用户查看图像。 [2]你需要添加投影类型，或者全屏Opera失败。 - 马克。I *think* so (untested).Build your page using <div>s for the images, assigning them an ID and noother attribute [1].In the separate print and screen,projection [2] CSS files, set the <div>dimensions and appropriate image as the <div> background.[1] except maybe a title attribute, as a poor substitute for the missingalt attribute on the <img> element. Maybe you could include a link tothe image inside each <div> element, set to display:none in the CSS.This would allow non-CSS browsers'' users to view the images.[2] You need to add the projection type, or full-screen Opera fails.--Mark. ro**************@hotmail.com （Roger Shrubber）写道：ro**************@hotmail.com (Roger Shrubber) wrote:打印页面的外观应与屏幕上的页面相同，但只是在图像。 我可以只使用CSS，@ media屏幕和@media打印吗？提前致谢。The printed page should beidentical in appearance to the on-screen page, but just with more detail inthe images.Can I do this using only CSS, with @media screen and @media print?Thanks in advance. @media screen { ..print {display：none} } @media print { ..screen {display：none} } < img src =" lowres.jpg ... class =" screen"> < img src =" highres.jpg" ... class =" print"> - Spartanicus@media screen{..print{display:none}}@media print{..screen{display:none}}<img src="lowres.jpg ... class="screen"><img src="highres.jpg" ... class="print">--Spartanicus Spartanicus写道：Spartanicus wrote: ro ******* *******@hotmail.com （Roger Shrubber）写道： ro**************@hotmail.com (Roger Shrubber) wrote:打印的页面应该是外观与屏幕上的页面相同，但只是在图像中有更多细节。 我可以只用CSS，@ media screen和@media print吗？提前致谢。The printed page should beidentical in appearance to the on-screen page, but just with more detail inthe images.Can I do this using only CSS, with @media screen and @media print?Thanks in advance. @media screen { .print {display：none} } @media print { 。screen {display：none} } < img src =" lowres.jpg ... class =" screen"> < img src = " highres.jpg" ... class =" print"> @media screen{ .print{display:none} } @media print{ .screen{display:none} } <img src="lowres.jpg ... class="screen"> <img src="highres.jpg" ... class="print"> 该死。为什么我没有看到这个解决方案？！ 当然，非CSS浏览器会画一个相当奇怪的页面... - 马克。Dammit. Why didn''t I see that solution?!Of course, a non-CSS browser will paint a rather strange page...--Mark. 这篇关于使用低分辨率图像进行屏幕，高分辨率进行打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！