Изображения на портативных устройствах слишком маленькие и меняют пропорции
Я разработал эту справочную систему с помощью HelpNDoc, но не понимаю, почему изображения получаются маленькими и искаженными, если они отображаются в окне браузера с измененным размером на ПК. Ссылка на сайт:
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
Все, что я сделал, это убрал ширину и высоту изображения. Тогда он течет красиво.
Используя консоль DevTools, я увидел, что ваша проблема, похоже, в следующем: #topic-content img { max-width: 100%; } Попробуйте удалить.
@AliSheikhpour Ключ в том, что вещи остаются читаемыми.
@Fabio_MO Спасибо. Я займусь расследованием. Я знаю, что могу добавить собственный CSS в программное обеспечение, которое создает справочную систему, но не знаю об удалении. Можем ли мы вместо этого установить его как альтернативное значение?
@AliSheikhpour Я добавил ссылку на старый сайт для сравнения.
@AndrewTruckle Попробуйте, например, установить max-width: fit-content; в css, но я предлагаю вам проверить DevTools и попытаться динамически установить стиль для понимания поведения, прежде чем писать код
@Fabio_MO Я попробовал ваше предложение. Хотя это увеличило изображение, в целом эффект на сайт был отрицательным. Мне нравится, как актуальные темы соответствуют браузеру, как на iPad. Если я изменю настройку, как указано, опыт будет более неприятным.
Ответы 3
Возможно, использование высоты и ширины области просмотра решит проблему. Попробуйте это!
Спасибо, но я думаю, это действительно должен быть комментарий, а не ответ.
Что ж .... Андрей, я не мог комментировать, потому что моя репутация была слишком низкой. В будущем я учту ваше предложение!
Поскольку вы установили карту на изображение, а карты не реагируют, вам необходимо использовать фиксированный размер для изображения (198 пикселей), однако при загрузке 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>
Спасибо. Будем смотреть. Я сбит с толку, потому что настроил эту карту. Будем расследовать. Однако учтите, что на всех страницах с изображениями есть проблемы. Не только в таблицах.
Похоже, что ваш контент изменился с тех пор, как вы задали вопрос, но на скриншоте видно, что изображение было помещено в ячейку таблицы. И его правило CSS указывает, что он должен иметь max-width: 100%, что означает, что он должен помещаться в свой контейнер, независимо от его ширины. Если размер ячейки таблицы изменяется на меньшем экране, то же самое и изображение, которое она содержит: вот что вызывает проблему.
Чтобы исправить это, у вас есть несколько вариантов:
Заставьте ячейку таблицы всегда иметь определенный размер, даже на небольших устройствах:
- Щелкните правой кнопкой мыши ячейку в редакторе тем HelpNDoc.
- Нажмите "Свойства таблицы".
- На вкладке «Ячейки» выберите «Предпочтительную ширину» в пикселях.
Удалите
max-width: 100%для этого образа или всех образов:- Щелкните верхнюю часть кнопки «Создать справку» на вкладке ленты «Главная» HelpNDoc.
- Выберите свою HTML-сборку
- Нажмите "Настроить".
- На вкладке «Настройки шаблона» найдите пункт «Пользовательский CSS».
- Добавьте собственный код CSS, например
#topic-content img {max-width: none}
Затем убедитесь, что вы снова создали свою HTML-документацию.
Спасибо. На данный момент я просто сбрасываю все изображения, чтобы у них не было размера, указанного в HTML-коде. Кроме того, кажется, что если у вас есть ячейка только с изображением, а затем ячейка с текстом, который всегда отображается плохо. Поэтому я реорганизовал способ отображения контента. Вы упомянули об удалении max-width для «этого образа», а не для всех. Как бы Вы это сделали?
Это можно сделать, настроив таргетинг на определенные изображения с помощью правил CSS. Например, table img {max-width: none} для изображений в таблицах ...
Для изображения и его родительского
<TD>размер в пикселях или процентах не задан. вы ищете фиксированный процент ширины документа или фиксированный размер изображения?