Масштабировать часть изображения или таблицы в CHM - PullRequest
Новая
       36

Масштабировать часть изображения или таблицы в CHM

0 голосов
/ 18 октября 2018

Я хочу разместить заголовок компании на первой странице наших руководств по CHM.Поскольку пользователи могут масштабировать CHM, заголовок должен масштабироваться в соответствии с шириной руководства.Высота не должна масштабироваться.Проблема заключается в том, что левая и правая части заголовка должны оставаться неизменными, поэтому масштабируется только центр заголовка.Левая сторона имеет обрезанный угол, угол которого не должен изменяться.Правая сторона содержит изображение.

Изображение:

enter image description here

Возможно ли это сделать с помощью CSS или HTML, либо с помощьюизображение или стол?

РЕДАКТИРОВАТЬ:

У меня все еще есть 2 проблемы, которые я не могу исправить.Надеюсь, вы можете помочь немного больше.Цвет фона в header_center также дает небольшое подчеркивание после компиляции в файл CHM.Это сделало это красным для видимости.Также, когда я масштабирую окно CHM, между header_left и header_center появляется пробел, и я понятия не имею, почему.Это решается, если я назначаю всем 3 заголовкам цвет фона, но я не хочу, чтобы под заголовком header_right была строка из-за изображения.Есть идеи?

Эти изображения являются результатом на этом этапе:

Header not scaled Header scaled

1 Ответ

0 голосов
/ 19 октября 2018

Знаете, CHM похож на формат ZIP и может содержать как HTML, так и CSS.Ниже я показал одну из возможностей использования изображений.Попробуйте и измените для своих нужд (см. HTML ниже).Цвета фона в <colgroup> используются только в демонстрационных целях.Если в середине есть текст, соответствующий цвет от баннера компании должен быть установлен как цвет фона.

enter image description here

Изображения, которые я использовал:

enter image description here enter image description here enter image description here

Убедитесь, что внешний CSS-файл, например, design.css, находится внутриВы проектируете структуру уровня и добавляете ее в раздел [FILES] вашего файла проекта HHP.Вы можете открыть этот * .hhp файл, например, с помощью Notepad ++ для добавления файлов.Если файлы перечислены в разделе [FILES], компилятор включает их в файл CHM.

[FILES] 
welcome.htm 
design.css
How_to_extend\extend_menu.htm 
How_to_extend\power_function.htm 
images\gui_screenshot.jpg

HTML и CSS: 

   <html>
     <head>
       <meta name="generator"
       content="HTML Tidy for HTML5 (experimental)" />
       <title></title>
       <style>

   .header {
     width: 100%;
     border-collapse: collapse;
     /*border: 1px solid black;*/
   }

   .header_left{
    width: 81px;
   }

   .header_center{
    /*background-image: url("help-info-de-right-part.png");*/
    /*background-color: #ff33cc;*/
    background-color: #e0e0e0;
    text-align: center;
   }

   .header_right{
    width: 82px;
   }

   .header td {
    padding: 0;
   }

   </style>
   </head>

     <body>
       <table class="header">
         <colgroup>
           <col style="background-color:green;" />
           <col style="background-color:red;" />
           <col style="background-color:yellow;" />
         </colgroup>
         <tr>
           <td class="header_left">
             <img src="help-info-de-left-part.png" />
           </td>
           <td class="header_center">
             <img src="help-info-de-center-part.png" />
           </td>
           <td class="header_right">
             <img src="help-info-de-right-part.png" />
           </td>
         </tr>
       </table>
       <h1>Heading 1</h1>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
       aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
       takimata sanctus est Lorem ipsum dolor sit amet.</p>
     </body>

   </html>
...