如何解决文本与高分辨率图像混合的问题？ 例如，一张 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>
最佳答案
使用百分比而不是固定金额会有所帮助。 例如
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);
}
}
关于css 文本和调整大小/缩小大图像以适合 A4 - 增加 DPI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23315755/