html - 在 CHM 中缩放部分图像或表格

标签 html css image tabular chm

我想将公司标题放在我们的 CHM 手册的首页。因为用户可以缩放 CHM,所以标题应该随手册的宽度缩放。高度不应缩放。 问题是标题的左侧和右侧都必须保持不变,因此只有标题的中心应该缩放。左侧有一个切 Angular ,其 Angular 不得改变。右侧包含一张图片。

图片:

enter image description here

是否可以使用 CSS 或 HTML,使用图像或表格来做到这一点?

编辑:

我还有 2 个问题无法解决。希望您能提供更多帮助。 header_center 上的背景色在编译成CHM 文件后也给了一个小下划线。它使它变红以提高可见度。此外,当我缩放 CHM 窗口时,header_left 和 header_center 之间出现空白,我不知道为什么。如果我给所有 3 个标题一个背景颜色,这就解决了,但我不想因为图像而在 header_right 下有一行。有任何想法吗?

这些图像是这个阶段的结果:

Header not scaled Header scaled

最佳答案

您知道,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 在您的元素级结构中,并添加到 HHP 元素文件的 [FILES] 部分。您可以使用例如打开此 *.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>

关于html - 在 CHM 中缩放部分图像或表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52869060/

相关文章:

html - 使用身份验证从动态内容提供程序加载 html5 音频

javascript - 滚动时保持粘性 div 具有相同的宽度

html - 背景 CSS 和 Google Chrome

jquery - 在所有浏览器的 html 页面上,让一张图片与另一张图片重叠的最佳方式是什么

Android ImageReader 获取 NV21 格式?

html - 如何排列两个 HTML 列,其中一个具有固定部分,以便它们可以堆叠?

css - Mixin 场景,尝试转换 css

css - Bootstrap 列相互重叠

html - div 元素居中和居右对齐

iphone - 如何将本 map 片保存到在线数据库