手持设备上的图像太小而且比例变化

Question

我已经使用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

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

Answer 1

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

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

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

   • 右键单击HelpNDoc主题编辑器中的单元格
   • 点击＆＃34;表格属性＆＃34;
   • 在＆＃34; Cells＆＃34;选项卡，选择＆＃34;首选宽度＆＃34;以像素为单位

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

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

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

Answer 2

也许使用视口高度和视口widht将解决问题。 试试吧！

Answer 3

由于您在图像上设置了地图，并且地图没有响应，因此您需要使用固定大小的图像（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>