0

我已经使用 HelpNDoc 开发了这个帮助系统，但我不明白为什么图像在 PC 上调整大小的浏览器窗口上显示时会变小并变形。关联：

http://trucklesoft.co.uk/help/BriefOverview.html#Languages

在 iPad 等小型设备上：

平板电脑

我的旧版帮助系统不是使用 HelpNDoc 创建的：

旧版帮助

旧版链接：

https://www.publictalksoftware.co.uk/msa/helponline/source/helpoptionsbriefoverview.htm

更新

这是 HelpNDoc 自己的帮助系统：

https://www.helpndoc.com/sites/default/files/documentation/html/Styleseditor.html

他们的图像缩放正确！他们max-width的设置是100%这样的，这不可能是原因。

更新 2

我似乎已经手动修复了它 - 看这里：

http://trucklesoft.co.uk/help/Authorization.html

我所做的就是删除图像的宽度和高度。然后它很好地流动。

4

3 回答 3

1

自从您提出问题以来，您的内容似乎发生了变化，但从您的屏幕截图来看，该图像看起来像是放置在表格单元格中。它的 CSS 规则表明它必须具有max-width: 100%必须适合其容器的含义，无论其宽度如何。如果表格单元格在较小的屏幕上调整大小，那么它包含的图像也是如此：这就是导致问题的原因。

要解决此问题，您有多种选择：

  1. 强制表格单元格始终为特定大小，即使在较小的设备上也是如此：

    • 右键单击 HelpNDoc 的主题编辑器中的单元格
    • 点击“表格属性”
    • 在“单元格”选项卡中，选择“首选宽度”（以像素为单位）

  2. 删除max-width: 100%此图像或所有图像的：

    • 单击 HelpNDoc 的“主页”功能区选项卡中“生成帮助”按钮的顶部
    • 选择您的 HTML 版本
    • 点击“自定义”
    • 在“模板设置”选项卡中，找到“自定义 CSS”项
    • 添加自定义 CSS 代码，例如#topic-content img {max-width: none}

然后确保再次生成 HTML 文档。

于 2018-05-31T13:29:02.317 回答
0

也许使用视口高度和视口宽度可以解决问题。试试看！

于 2018-05-30T12:30:57.090 回答
0

由于您在图像上设置了地图，并且地图没有响应，因此您需要对图像使用固定大小（198px），但是引导程序会max-width:100%在所有子元素上设置。因此，如果您有一个<td>小尺寸的图像，图像也会调整为其父级的 100% 宽度。<td>结论是为width:100%图像本身设置固定大小：

    <td valign="middle" style="padding: 10px;width:198px;">
       <p class="rvps4">
         <img alt="" style="padding:1px; width:100%" src="lib/MAP_MNU_Options.png" usemap="#57DA0D7BD5934A4491D380D9F8AD74BD">
       </p>
    </td>
于 2018-05-30T13:23:07.713 回答