Acumatica设置网格行高：图片导致行高过大的解决方案咨询

嘿，你的思路完全正确！用CSS的object-fit: contain属性控制图片显示，同时限制图片的最大宽高，就能在完整展示图片的前提下缩小行高。下面是具体的实现步骤，一步步来：

1. 给缩略图列添加自定义CSS类 #

首先，你需要给销售订单行网格里的ThumbnailURL列指定一个专属的CSS类，方便后续定位样式：

• 如果是通过屏幕编辑器自定义列：
  打开销售订单屏幕（SO301000）的编辑器，找到订单行网格（Transactions），选中你的Thumbnail列，在右侧属性面板里找到CssClass属性，输入比如order-line-thumbnail。
• 如果是通过ASPX代码自定义：
  在网格的<PXGridColumn>标签里添加CssClass="order-line-thumbnail"，示例代码如下：

  <px:PXGridColumn DataField="ThumbnailURL" CssClass="order-line-thumbnail" DisplayName="Thumbnail" />
  

2. 添加自定义CSS样式到Acumatica #

接下来需要把控制图片的CSS样式注入到系统中，推荐两种常用方式：

方式一：通过自定义主题添加（适合直接修改网站的场景） #

1. 打开Acumatica网站根目录的App_Themes文件夹，进入你当前使用的主题文件夹（比如Default）。
2. 创建新的CSS文件（比如CustomGridStyles.css），写入以下样式：

   /* 控制缩略图列里的图片尺寸与显示方式 */
   .order-line-thumbnail img {
       max-width: 50px; /* 根据需求调整最大宽度 */
       max-height: 50px; /* 根据需求调整最大高度 */
       object-fit: contain; /* 保持图片比例，完整显示在指定尺寸内 */
       display: block; /* 避免图片下方出现多余间距 */
   }
   

3. 找到主题文件夹里的StyleSheet.css，在末尾添加一行引入自定义CSS：

   @import url("CustomGridStyles.css");
   

方式二：通过自定义项目资源添加（适合开发自定义项目的场景） #

1. 在你的Acumatica自定义项目中，添加一个新的Resource文件（右键项目→Add→New Item→Resource File），命名为CustomStyles.resx。
2. 在资源文件里添加字符串项：Name设为GridThumbnailStyles，Value填入上面的CSS代码。
3. 在销售订单屏幕的代码文件（比如SOOrderEntry.cs）的Initialize()方法中注册样式：

   protected override void Initialize()
   {
       base.Initialize();
       // 注册自定义CSS样式
       PX.StyleSheet.Register(this, "CustomStyles", "GridThumbnailStyles");
   }
   

3. 测试效果 #

保存修改后，发布自定义项目（项目方式）或重启网站（主题修改方式），打开销售订单页面查看：

• 图片会自动缩放到你设置的尺寸范围内，保持原有比例完整显示
• 网格行高会自动适配图片高度，不会再被原图的大尺寸撑高

额外优化提示 #

如果网格行还有多余间距，可以尝试缩小单元格内边距：

.px-grid-row .order-line-thumbnail {
    padding: 2px 4px; /* 按需调整内边距大小 */
}

内容的提问来源于stack exchange，提问作者Dane