0

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:

ipad

My legacy help system which was not created using HelpNDoc:

legacy help

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.

jonjbar
  • 3,896
  • 1
  • 25
  • 46
Andrew Truckle
  • 17,769
  • 16
  • 66
  • 164
  • There is no size in pixel or percent set for image and its parent ``. are you looking for a fixed percent of document width or fixed size for image? – Ali Sheikhpour May 30 '18 at 12:25
  • 1
    Using the console DevTools I saw that your problem seems to be: `#topic-content img { max-width: 100%; }` Try to remove it. – Fabio_MO May 30 '18 at 12:28
  • @AliSheikhpour The key is things remain readable. – Andrew Truckle May 30 '18 at 12:48
  • @Fabio_MO Thanks. I will investigate. I know I can add custom CSS to the software that builds the help system, but I don’t know about removing. Could we set it as an alternative value instead? – Andrew Truckle May 30 '18 at 12:50
  • @AliSheikhpour I added link to legacy site for comparison. – Andrew Truckle May 30 '18 at 12:54
  • @AndrewTruckle Try for example to set `max-width: fit-content;` in css but I sauggest you to check the DevTools and try to set dinamically the style for understanding the bahaviour before write the code – Fabio_MO May 30 '18 at 12:56
  • @Fabio_MO I tried your suggestion. Whilst it made the image larger, overall the effect on the site was negative. I like how the topics current fit the browser properly, like on iPad. If I change the setting as stated the experience is more unpleasant. – Andrew Truckle May 30 '18 at 16:50

3 Answers3

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.

jonjbar
  • 3,896
  • 1
  • 25
  • 46
  • Thanks. At the moment I just reset all images so that they did not have a dimension specified in the HTML code. Also, it seems that if you have a cell with just an image and then a cell with text that it always shows not well. So I reorganized how I displayed content. You mentioned about removing the `max-width` for "this image" as opposed to all. How would you do that? – Andrew Truckle May 31 '18 at 17:18
  • 1
    This can be done by targeting specific images via CSS rules. Such as `table img {max-width: none}` for images within tables... – jonjbar Jun 01 '18 at 07:34
0

Maybe using viewport height and viewport widht will solve the problem. Try that out!

Evading Shadows
  • 479
  • 1
  • 6
  • 22
0

As you have set a map on the image, and the maps are not responsive, you need to use fixed size for image (198px) however bootstrap sets max-width:100% on all children elements. So if you have a <td> with small sizes, the image will also resize to its parent 100% width. The conclusion is to set a fixed size for <td> and width:100% for image itself:

    <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>
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • Thanks. Will look. I am confused because I set that map up. Will investigate. However please note all pages with images have issues. Not just in tables. – Andrew Truckle May 30 '18 at 13:51