css文本和调整大小/缩小大图像以适应A4-增加DPI

如何解决文本与高分辨率图像混合的问题？例如，一张4Mpix（或更多）的图像，显示在1024x768或全高清屏幕的浏览器中，并且您不想水平滚动，也不想在A4打印上剪切图像。

谢谢？

A4 is 210mm × 297mm
72 dpi (web) = 595 X 842 pixels 
300 dpi (print) = 2480 X 3508 pixels
600 dpi (print) = 4960 X 7016 pixels

我发现最好的是这样的东西，但在全高清屏幕上，它很愚蠢，而且在打印时不能提供良好的DPI。

<STYLE type="text/css">
img {
max-width:800px;
max-height:800px;
}
</STYLE>

也尝试过

<STYLE type="text/css">
body{
width: 21cm;
padding: 2cm;
margin: 1cm auto; }
</STYLE>

页面的html代码可能是

<body>
<h1>Hello</h1>
<p><img src="3200by1800image.JPG"></p>
<p>other image</p>
<p><img src="600by400image.JPG"></p>
</body>

p.S。http://www.html5rocks.com/en/mobile/high-dpi/

使用百分比而不是固定金额会有所帮助。例如

width:50%
height:50%

你也可以使用媒体查询在更大的屏幕上用更高分辨率的图片替换图片？

可以这样做：HTML

<img src="mobile.jpg" data-src-desktop="desktop.jpg" alt="">

CSS

@media (min-width: 1024px) {
    img[data-src-desktop] {
        content: attr(data-src-desktop, url);
    }
}

相关内容