使用低分辨率图像进行屏幕，高分辨率进行打印 [英] Using low-res images for screen, high-res for printing
问题描述
Hello all
我创建了一个页面，上面有几张图片。每张照片都是由实际相框的实际照片制成的框架所包围，
由四个角落瓷砖和四个重复的侧面瓷砖组成。
我希望屏幕显示使用
图像的低分辨率版本（96 dpi），以确保快速加载。但我希望打印版本能够使用高分辨率版本（300 dpi或更高）。打印页面的外观应与屏幕上的页面相同，但只需更多细节
图像。
我可以只使用CSS，@ media screen和@media打印吗？
提前谢谢。
roger
（顺便说一句，我可以使用屏幕上的不同HTML获得我想要的效果和
打印。通过设置IMG标签的宽度和高度，我强制无论它包含的图像的像素尺寸如何，它都是特定尺寸的
。
如果以这种方式缩小图像，打印质量会提高很多。 br />
但据我所知，我不能将IMG标签设置为仅使用CSS的
打印和屏幕媒体的不同src。我也不能轻易地平铺这些图像。）
Hello all
I have created a page which has several pictures on it. Each picture is
surrounded 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 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?
Thanks in advance.
roger
(BTW, I can get the effect I want using different HTML for the screen and
print. By setting the width and height of an IMG tag, I force it to be a
specific 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 for
print 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 no
other 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 missing
alt attribute on the <img> element. Maybe you could include a link to
the 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 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?
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 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?
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.
这篇关于使用低分辨率图像进行屏幕，高分辨率进行打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
