描述一下体验不好的点

其它体验问题

目前 NPC 评论场景会输出表情包，宽度也容易失控，希望能一起限制一下，防止刷屏，比如：

Bring/AGI/OpenClaw#62 (comment)

注意事项

• 因为上传图片的img写死了width属性，所以不能使用 max-height 限制，不然会变形，只能使用 max-width 限制大小
• readme.md 代码场景不受影响，即保持无限制，因为 readme 代码场景下图片大小都是精心策划的，不能随便限制大小
• 徽章也使用图片显示的，要防止误伤

@CodeBuddy css 有没有办法做到只对超出指定大小的图片生效的样式，比如 max-width 只对 width 超过500px的img 生效，或 max-height 只对 height 超过500px的图片生效

@youkun(哪都通在逃临时工) 根据 Issue 3293 的内容，你需要在 CNB 平台上实现一个功能：只对超过指定尺寸的图片应用 max-width 样式限制。

CSS 本身无法直接判断"图片实际宽度是否超过 500px"，但有几种替代方案：

方案 1：使用容器查询 (Container Queries)

如果图片外层有容器，可以结合容器查询和 min() 函数：

.container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  img {
    max-width: 61.8%;
  }
}

方案 2：使用 min() 函数（推荐）

这是最简洁的方案，直接用 min() 限制最大宽度，同时保证小图不受影响：

img {
  max-width: min(100%, 500px);
  /* 或者针对你的需求 */
  max-width: 61.8%;
  /* 配合 min() 确保小图不被压缩 */
  width: auto;
}

方案 3：针对你的具体需求

根据 Issue 描述，你需要：

• 限制 NPC 评论场景中的大图
• 不影响 readme.md 代码场景
• 不影响徽章

可以结合 CSS 类名或数据属性：

/* NPC 评论中的大图 */
.cnb-comment img,
.md-content img[data-is-screenshot] {
  max-width: 61.8%;
  width: auto;
  height: auto;
}

/* 徽章单独处理（通常是小图） */
img[src*="badge"] {
  max-width: none;
}

方案 4：如果你需要精确的 500px 阈值判断

CSS 做不到精确判断，必须用 JavaScript：

document.querySelectorAll('img').forEach(img => {
  if (img.naturalWidth > 500) {
    img.classList.add('large-image');
  }
});

img.large-image {
  max-width: 61.8%;
}

---

总结：对于你的场景，推荐用方案 2 的 min() 函数，或者方案 3 通过选择器区分不同场景（NPC 评论 vs readme 代码 vs 徽章）。如果 NPC 评论有特定的父容器类名，可以更精确地定位。

亲测这样效果不错，得再限制一下只对issue和pr生效

.markdown-preview img {
   max-width: max(61.8%, 300px);
   max-height: 300px;
   width: auto;
}