Images are too small on handheld devices and change proportions

Question

I have developed this help system with HelpNDoc but I don’t understand why images end up small and distorted if displayed on a resized browser window on a PC. Link:

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

On small devices like iPad:

My legacy help system which was not created using HelpNDoc:

Legacy link:

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

Update

Here is the HelpNDoc own help system:

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

Their images are scaling correctly! Their max-width is set to 100% so that can't be the reason.

Update 2

I seemed to have manually fixed it - look here:

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

All I have done is remove the image widths and heights. Then it flows nicely.

Answer 1

It looks like your content has changed since you asked the question but from your screenshot, it looks like the image was placed in a table cell. And its CSS rule indicates that it must have a max-width: 100% meaning that it must fit in its container, no matter its width. If the table cell is resized on a smaller screen, so is the image it contains: that's what is causing the problem.

To fix this, you have multiple options:

1. Force the table cell to be always a specific size, even on smaller devices:

   • Right click on the cell in HelpNDoc's topic editor
   • Click "Table properties"
   • In the "Cells" tab, choose a "Preferred width" in pixels

2. Remove the max-width: 100% for this image or all images:

   • Click the top part of the "Generate Help" button in HelpNDoc's "Home" ribbon tab
   • Select your HTML build
   • Click "Customize"
   • In the "Template settings" tab, locate the "Custom CSS" item
   • Add a custom CSS code such as #topic-content img {max-width: none}

Then make sure that you generate your HTML documentation again.