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

【问题标题】：css text and resize/shrink big image to fit A4 - increase DPIcss 文本和调整大小/缩小大图像以适合 A4 - 增加 DPI
【发布时间】：2014-04-26 19:49:03
【问题描述】：

如何解决文本与高分辨率图像混合的问题？例如，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>

【问题讨论】：

【解决方案1】：

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

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);
    }
}

【讨论】：