「个人简介」挂件：头像/昵称/简介/背景四项可单独填 + 修大图撑爆 #21

一、头像 / 昵称 / 简介原来**只读主题设置**，挂件表单里没有字段
  · 用户点开侧栏「个人简介」只能改背景图，头像和那句话得跑去
    「主题设置 → 站长信息」改全站共用的那份。
  · 现在四项都是挂件实例字段：avatar / nickname / introduce / background。
  · 取值顺序：实例 → 主题设置 → 内置兜底，**留空即回落**，
    老站点升级后显示一点不变。
  · pick() 判空统一用「trim 后是不是空串」，不用 empty()
    （!empty('0') 是 false，昵称就叫「0」会被当没填）。
  · 简介用 sanitize_textarea_field（保留换行），URL 用 esc_url_raw
    （不做 HTML 实体化，避免与 esc_attr 双重转义）。

二、后台 form() 补齐五个字段
  · 头像 / 背景各带「选择图片」按钮（调媒体库），背景另有「清除」。
  · 输入框显示用户填的原始值，缩略图显示前台最终会用的那张，刻意分开。
  · 资源加载统一到 yang_widget_admin_assets()，不再每个挂件各挂一次。

三、大图撑爆挂件的真因：CSS 选择器依赖三层祖先
  · 老规则是 `.k-main .sidebar .w-about .wrapper img`，而后台
    「外观 → 小工具」预览里没有 `.k-main .sidebar` 这层祖先，
    规则一条都不生效 ⇒ 头像按原图 2136×2136 铺开、背景塌成 0。
    前台看着正常是因为前台恰好有那层祖先，问题被完全掩盖。
  · 改为只管 `.w-about` 内部元素，并补 max-width/max-height 双保险。
  · 老规则必须**删掉**而不是并存：它是 (0,3,1)，新规则是 (0,2,1)，
    并存时老规则在前台永远赢，新规则只对后台生效。
  · 保留 `.k-main .sidebar .w-about { padding:0 }`：通用规则
    `.k-main .sidebar .widget` 是 (0,3,0)，少了这条会多出内边距、整体高 57px。
  · 头像保持 inline（display:block 会让它脱离 text-align:center 的居中）。
  · 顺带：object-fit 从 fill 改 cover（超宽图不再压扁）；
    背景 url() 补引号（文件名带空格时不再整条声明作废）。

验证
  · 行为测试 67 条全通过；反向验证 13 组全部真红。
  · 浏览器几何 76 条全通过（前台/后台 × 四种极端原图）。
  · 修复前 CSS 跑同一套判据：38 条报红，精确复现用户症状
    （后台挂件高 2217、头像 2136×2136、横向滚动 2146）。
  · 线上真实页面 + 新版 CSS：16 条全通过。

assets/css/kratos.css

@@ -1777,43 +1777,122 @@ button:focus {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
+.k-main .sidebar > div:last-child {
+  margin: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+ * 「个人简介」挂件（.w-about）：尺寸自持（3.2.51）
+ *
+ * ── 原来为什么会被大图撑爆 ──────────────────────────────────────────
+ * 这一组规则原来全部写成三段祖先选择器：
+ *
+ *     .k-main .sidebar .w-about .wrapper img { width:100px; height:100px }
+ *     .k-main .sidebar .w-about .background  { height:120px }
+ *
+ * `.k-main` → `.sidebar` → `.w-about` 这三段是**前台文章页/首页的布局**。
+ * 挂件一旦出现在没有这层祖先的地方：
+ *
+ *     · WordPress 后台「外观 → 小工具」的挂件预览
+ *     · 区块小工具（Widgets Block Editor）的预览面板
+ *     · 侧栏被别的主题/插件改写结构时
+ *
+ * 这些规则**一条都不生效**，头像 <img> 没有任何宽高约束，直接按原图
+ * 尺寸铺开；`.background` 也会塌成 0 高。
+ *
+ * 线上实测（avatar.jpg 原图 2136×2136）：
+ *     有祖先 → 挂件 397×285，   头像 100×100        ✅
+ *     无祖先 → 挂件 1400×2217，头像 2136×2136       ❌ 撑爆，横向滚动 2156px
+ *
+ * ── 现在的做法 ──────────────────────────────────────────────────────
+ * 只依赖**挂件自己的类名** `.w-about`，不再依赖外层布局。这样无论挂件
+ * 被丢进什么容器，头像都是固定小圆、背景都是固定高。
+ *
+ * 🔴 必须把老的三段选择器**删掉**，不是"再补一条新的"。
+ *    实测过：`.k-main .sidebar .w-about .wrapper img` 优先级 (0,3,1)，
+ *    而 `.w-about .wrapper img` 只有 (0,2,1)。两条并存时**老规则在前台永远赢**，
+ *    于是新规则只在后台生效 —— 前台改新规则等于白改，而且会让人误以为
+ *    "改了没反应"。我把头像故意改成 200px 反证过：像素完全不变，
+ *    因为前台根本用的是老规则。单一真相来源才不会有这个坑。
+ *
+ * 🔴 为什么不用 !important：那会让用户/子主题以后想改头像尺寸时
+ *    完全改不动。
+ * ══════════════════════════════════════════════════════════════════════ */
+
+/* 背景条：高度不依赖祖先 */
+.w-about .background {
+  height: 120px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/* 挂件自身去掉内边距。
+ *
+ * 原来写的是 `.k-main .sidebar .w-about, .k-main .sidebar .w-ad { padding:0 }`
+ * —— 依赖祖先，所以后台预览里会吃 `.widget` 的 15px 内边距，跟前台不一致。
+ * 下面这组把它拆成两条：
+ *   ① `.w-about` / `.w-ad`（无祖先）—— 覆盖后台/其它容器里的 `.widget` 内边距；
+ *   ② `.k-main .sidebar .w-about` / `.w-ad`（前台）—— 覆盖主题自己的
+ *      `.k-main .sidebar .widget { padding: 15px 30px }`。
+ *
+ * 🔴 ② 这条**不能省**：它的对手 `.k-main .sidebar .widget` 优先级 (0,3,0)，
+ *    而 ① 只有 (0,1,0)，光靠 ① 在前台会被压回去 —— 实测挂件会多出
+ *    15px/30px 内边距、整体高 57px（284→341），头像和文字全部错位。
+ *    两处的**值必须一致**（都是 0），前后台才不会出现分歧。 */
+.w-about,
+.w-ad {
+  padding: 0;
+}
+
 .k-main .sidebar .w-about,
 .k-main .sidebar .w-ad {
   padding: 0;
 }
 
-.k-main .sidebar > div:last-child {
-  margin: 0;
-}
-
-.k-main .sidebar .w-about .background {
-  height: 120px;
-}
-
-.k-main .sidebar .w-about .wrapper img {
+/* 头像：固定尺寸 + 裁切，永远不可能超出自己的盒子。
+ *
+ * object-fit:cover 是关键 —— 原图 2136×2136、1×1、4000×100、100×4000
+ * 都能被忠实裁进 100×100 的圆里，不会变形，也不会把盒子撑开。
+ * 在没有祖先约束的环境里尤其重要：那里没有别的规则兜底。
+ * （原来是 fill，非正方形头像会被拉伸变形，这次一并修掉。）
+ *
+ * 🔴 不要写 display:block —— 实测会带来两处前台外观变化：
+ *    ① 头像从「行内被 text-align:center 居中」变成「块级独占一行」，
+ *       父级 .wrapper 高度从 50px 变 100px；
+ *    ② x 坐标从 1096.66（居中）变成 948.33（左对齐）。
+ *    两处都是肉眼可见的位移。保持 inline（默认）才能原样继承 text-center。
+ *
+ * 🔴 margin 保持 `-50px 0 0`（水平 0）而不是 `auto`：水平居中本来就由
+ *    父级 text-align:center 完成，写 auto 在 inline 元素上也不生效。 */
+.w-about .wrapper img {
   margin: -50px 0 0;
   width: 100px;
   height: 100px;
+  max-width: 100px;
+  max-height: 100px;
+  object-fit: cover;
   border: rgba(255, 255, 255, 0.4) 4px solid;
   border-radius: 50%;
 }
 
-.k-main .sidebar .w-about .textwidget {
+/* 文字区：同样不依赖祖先 */
+.w-about .textwidget {
   padding: 5px 20px 20px;
 }
 
-.k-main .sidebar .w-about .textwidget p {
+.w-about .textwidget p {
   margin-bottom: 0;
   cursor: default;
 }
 
-.k-main .sidebar .w-about .textwidget .username {
+.w-about .textwidget .username {
   font-size: 17px;
   font-weight: 500;
   margin-bottom: 5px;
 }
 
-.k-main .sidebar .w-about .textwidget .about {
+.w-about .textwidget .about {
   font-size: 15px;
 }