Question

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

Answer 1

使用百分比而不是固定金额可以提供帮助。 e.g。

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