【问题】

docbook中,生成的html和pdf中,图片都已经可以实现缩放了。但是同样的xml源码:


典型的Flash内存单元的物理结构

得到的结果,在html和pdf中,显示效果不同,缩放不统一,导致很难看:

html5图片类型 html5图片大小_html

html5图片类型 html5图片大小_html5里的pdf如何保存图片大小_02

而本身图片的大小是这个效果的:

html5图片类型 html5图片大小_html5图片类型_03

现在希望是,同样统一的源码,使得在生成HTML和PDF中,显示出来的图片,都是统一的格式,要么都放大,要么都缩小。并且是希望:

在HTML中,图片都是以原始大小去显示

在PDF中,图片小于页面宽度的,则以原始大小显示,大于页面宽度的,则缩至页面宽度以能够显示全部。

【解决过程】

1.之前其实已经折腾过一段时间了,但是还是没有很好的解决此问题。

现在找到了官网关于这部分的解释:Chapter 18. Graphics,这下打算好好的看看,然后看懂了之后,再去折腾试试。

2.后来参考:

去折腾了半天,最后,对于尺寸较小(242×150)的flash_cell_structure.jpg,使用了如下代码:


典型的Flash内存单元的物理结构

实现了HTML中输出的是正常的尺寸大小:

html5图片类型 html5图片大小_html5图片类型_04

PDF输出中,貌似正常,但是觉得有点小,不过倒也无大碍:

html5图片类型 html5图片大小_html5里的pdf如何保存图片大小_05

然后对于我此处常见的其他图片大小都是相对较大一些,超过普通pdf中单页的宽度的图片,比如800×526的nand_flash_layout.png,则是采用如下代码:


Nand Flash的结构图

即,HTML中scalefit="0",而显示原始图片:

html5图片类型 html5图片大小_html5图片类型_06

而PDF中是采用scalefit="1",缩放到当前页面大小的:

html5图片类型 html5图片大小_html5图片类型_07

这样,就基本达到了我的要求了:

对于个别的小图片,小于当前pdf中单页宽度的,则:

HTML:使用原始大小显示

PDF:使用原始大小显示

而对于多数的超过PDF中单页大小的图片,则:

HTML:使用原始大小显示

PDF:缩放到PDF中单页的大小

这样,就不会出现之前的,用scalefit="1" width="100%,导致虽然pdf中显示很正常,但是HTML中每个图片都放大到整个屏幕宽度的,那样恼人的效果了。

【总结】

想要实现以最少改动的代码,而对于HTML中和PDF中的图片显示都比较合适的话,目前找到的最好的办法是:

1. 对于个别的小图片,小于当前pdf中单页宽度的,则使用:


典型的Flash内存单元的物理结构

以实现:

HTML:使用原始大小显示

PDF:使用原始大小显示

当前,对于这样个别图片,也可以自己分别对HTML和PDF中去微调,以达到自己所需要的效果。

关于图片缩放的各个参数的解释,可以去参考:Image sizing

2. 而对于多数的超过PDF中单页大小的图片,则采用:


Nand Flash的结构图

以实现:

HTML:使用原始大小显示

PDF:缩放到PDF中单页的大小