图像在手持设备上太小并且会改变比例

Question

我已经使用 HelpNDoc 开发了这个帮助系统，但我不明白为什么如果在 PC 上调整大小的浏览器 window 上显示图像最终会变小和变形。 Link:

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

在像 iPad 这样的小型设备上：

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

旧版 link:

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

我所做的就是删除图像的宽度和高度。然后就流畅了。

Answer 1

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

Answer 2

由于您在图像上设置了地图，并且地图没有响应，因此您需要为图像使用固定大小 (198px)，但是 bootstrap 在所有子元素上设置 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>

Answer 3

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

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

强制 table 单元格始终为特定大小，即使在较小的设备上也是如此：
- 右键单击 HelpNDoc 主题编辑器中的单元格
- 点击"Table properties"
- 在 "Cells" 选项卡中，选择 "Preferred width" 像素
删除此图片或所有图片的 max-width: 100%：
- 单击 HelpNDoc 的 "Home" 功能区选项卡中 "Generate Help" 按钮的顶部
- Select 你的 HTML build
- 点击"Customize"
- 在 "Template settings" 选项卡中，找到 "Custom CSS" 项
- 添加自定义 CSS 代码，例如 #topic-content img {max-width: none}

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

图像在手持设备上太小并且会改变比例

Images are too small on handheld devices and change proportions

html

helpndoc

更新

更新 2