CODEWITHSUNDEEP
htmlhelpndoc
Andrew Truckle
Andrew Truckle

Reputation: 19097

Images are too small on handheld devices and change proportions

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.

Upvotes: 0

Views: 211

Answers (3)

jonjbar
jonjbar

Reputation: 4066

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.

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

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>

Upvotes: 0

Evading Shadows
Evading Shadows

Reputation: 489

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

Upvotes: 0

Related Questions