Изображения слишком маленькие на портативных устройствах и меняют пропорции - PullRequest
Новая
       25

Изображения слишком маленькие на портативных устройствах и меняют пропорции

0 голосов
/ 30 мая 2018

Я разработал эту справочную систему с помощью HelpNDoc, но я не понимаю, почему изображения оказываются маленькими и искаженными, если отображаются в окне браузера с измененным размером на ПК.Ссылка:

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

На небольших устройствах, таких как iPad:

ipad

Моя устаревшая справочная система, которая не была создана с помощью HelpNDoc:

legacy help

Устаревшая ссылка:

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

Все, что я сделал, это удалил ширину и высоту изображения.Тогда это течет красиво.

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Поскольку вы установили карту на изображение, и карты не реагируют, вам нужно использовать фиксированный размер для изображения (198px), однако при начальной загрузке 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>
0 голосов
/ 31 мая 2018

Похоже, что ваш контент изменился с тех пор, как вы задали вопрос, но на скриншоте это выглядит так, как будто изображение было помещено в ячейку таблицы.И его правило CSS указывает, что он должен иметь max-width: 100%, что означает, что он должен помещаться в свой контейнер, независимо от его ширины.Если ячейка таблицы изменяется на меньшем экране, то же самое относится и к изображению, которое она содержит: вот что вызывает проблему.

Чтобы исправить это, у вас есть несколько вариантов:

  1. Принудительно указывать ячейку таблицы всегда определенного размера, даже на небольших устройствах:

    • Щелкните правой кнопкой мыши ячейку в редакторе тем HelpNDoc
    • Нажмите «Свойства таблицы»
    • На вкладке «Ячейки» выберите «Предпочтительная ширина» в пикселях

  2. Удалите max-width: 100% для этого изображения или всех изображений:

    • Нажмите верхнюю часть кнопки «Создать справку» на вкладке ленты «Главная» HelpNDoc
    • Выберите сборку HTML
    • Нажмите «Настроить»
    • ВНа вкладке «Настройки шаблона» найдите элемент «Пользовательский CSS»
    • Добавьте пользовательский код CSS, например #topic-content img {max-width: none}

Затем убедитесь, что вы генерируетеВаша HTML документация снова.

0 голосов
/ 30 мая 2018

Возможно, использование высоты видового экрана и видового экрана позволит решить проблему.Попробуйте!

...