@neatui/css 4.2.4 → 4.2.6

package/GUIDE.md

@@ -737,6 +737,47 @@ gap: 间距等级 (ss, sm, mm, ml, ll...)
 比例和偏移是同一个“高度模式”，一次只能选择一个；`cover / contain` 可以再与它
 组合。该语法不接受任意比例、任意百分比或响应式前缀。
 
+图上也可以用 `ui-fit` 写更完整的装入策略（含 `fill` / `none` / `down` 与锚点）；
+若图已声明 `ui-fit`，则以图上的为准。
+
+### `ui-fit`：媒资装入
+
+`ui-fit` 描述置换元素（`img` / `video` 等）相对已定尺寸容器的装入策略，对应
+`object-fit`，可选锚点对应 `object-position`。与 `ui-cover`（造框）正交。
+
+```text
+ui-fit="{mode} {anchor?}"
+```
+
+`mode` 五选一：
+
+| Token | 意图 | CSS |
+|-------|------|-----|
+| `cover` | 铺满，多出裁 | `object-fit: cover` |
+| `contain` | 完整装入，可留白 | `object-fit: contain` |
+| `fill` | 扯满，可变比 | `object-fit: fill` |
+| `none` | 固有尺寸 | `object-fit: none` |
+| `down` | 只缩不放 | `object-fit: scale-down` |
+
+`anchor` 可选，复用 `ui-flex` 九宫格坐标：
+
+```text
+lt ct rt
+lm cm rm
+lb cb rb
+```
+
+```html
+<img ui-fit="cover" />
+<img ui-fit="contain" />
+<img ui-fit="cover lt" />
+<img ui-fit="contain cm" />
+<img ui-fit="down" />
+```
+
+不写 `ui-fit` 时保持浏览器默认；写在 `ui-cover` 框内且未声明时，由封面框默认
+按 `cover` 处理。该语法没有响应式前缀。
+
 ### `ui-omit`：1–9 行省略
 
 ```html

package/core/basic.scss

@@ -158,6 +158,14 @@
   .#{$d}inline-sub > * {
     display: inline;
   }
+  .#{$d}none,
+  .#{$d}none-sub > * {
+    display: none;
+  }
+  .#{$d}hide,
+  .#{$d}hide-sub > * {
+    opacity: 0;
+  }
 
   .#{$d}scroll {
     overflow: auto;

package/core/cover.scss

@@ -17,17 +17,17 @@ $sz: no, xs, ss, sm, ms, mm, ml, ls, lm, ll, xl;
     background-position: center;
     background-repeat: no-repeat;
   }
-  img {
+  // 封面框默认裁切铺满；图上显式 ui-fit 时由装入策略接管
+  img:not([ui-fit]) {
     object-fit: cover;
   }
-
   &[ui-cover~='cover'] {
-    img {
+    img:not([ui-fit]) {
       object-fit: cover;
     }
   }
   &[ui-cover~='contain'] {
-    img {
+    img:not([ui-fit]) {
       object-fit: contain;
     }
   }

package/core/fit.scss

@@ -0,0 +1,48 @@
+// ui-fit：置换元素装入策略（object-fit）+ 可选九宫格锚点（object-position）
+// 语法: ui-fit="{mode} {anchor?}"
+// mode: cover | contain | fill | none | down
+// anchor: lt lm lb ct cm cb rt rm rb（与 ui-flex 九宫格同词）
+
+[ui-fit~='cover'] {
+  object-fit: cover;
+}
+[ui-fit~='contain'] {
+  object-fit: contain;
+}
+[ui-fit~='fill'] {
+  object-fit: fill;
+}
+[ui-fit~='none'] {
+  object-fit: none;
+}
+[ui-fit~='down'] {
+  object-fit: scale-down;
+}
+
+[ui-fit~='lt'] {
+  object-position: left top;
+}
+[ui-fit~='lm'] {
+  object-position: left center;
+}
+[ui-fit~='lb'] {
+  object-position: left bottom;
+}
+[ui-fit~='ct'] {
+  object-position: center top;
+}
+[ui-fit~='cm'] {
+  object-position: center center;
+}
+[ui-fit~='cb'] {
+  object-position: center bottom;
+}
+[ui-fit~='rt'] {
+  object-position: right top;
+}
+[ui-fit~='rm'] {
+  object-position: right center;
+}
+[ui-fit~='rb'] {
+  object-position: right bottom;
+}

package/dist/neatui.css

@@ -581,6 +581,14 @@ sup{
   display:inline;
 }
 
+.none,.none-sub>*{
+  display:none;
+}
+
+.hide,.hide-sub>*{
+  opacity:0;
+}
+
 .scroll{
   overflow:auto;
 }
@@ -742,6 +750,12 @@ sup{
   .pad\:inline,.pad\:inline-sub>*{
     display:inline;
   }
+  .pad\:none,.pad\:none-sub>*{
+    display:none;
+  }
+  .pad\:hide,.pad\:hide-sub>*{
+    opacity:0;
+  }
   .pad\:scroll{
     overflow:auto;
   }
@@ -897,6 +911,12 @@ sup{
   .mob\:inline,.mob\:inline-sub>*{
     display:inline;
   }
+  .mob\:none,.mob\:none-sub>*{
+    display:none;
+  }
+  .mob\:hide,.mob\:hide-sub>*{
+    opacity:0;
+  }
   .mob\:scroll{
     overflow:auto;
   }
@@ -16440,10 +16460,10 @@ td[ui-col],th[ui-col]{
   top:0;
   width:100%;
 }
-[ui-cover] img,[ui-cover][ui-cover~=cover] img{
+[ui-cover] img:not([ui-fit]),[ui-cover][ui-cover~=cover] img:not([ui-fit]){
   object-fit:cover;
 }
-[ui-cover][ui-cover~=contain] img{
+[ui-cover][ui-cover~=contain] img:not([ui-fit]){
   object-fit:contain;
 }
 [ui-cover][ui-cover~="1:1"]{
@@ -16570,6 +16590,62 @@ td[ui-col],th[ui-col]{
   padding-top:50%;
 }
 
+[ui-fit~=cover]{
+  object-fit:cover;
+}
+
+[ui-fit~=contain]{
+  object-fit:contain;
+}
+
+[ui-fit~=fill]{
+  object-fit:fill;
+}
+
+[ui-fit~=none]{
+  object-fit:none;
+}
+
+[ui-fit~=down]{
+  object-fit:scale-down;
+}
+
+[ui-fit~=lt]{
+  object-position:left top;
+}
+
+[ui-fit~=lm]{
+  object-position:left center;
+}
+
+[ui-fit~=lb]{
+  object-position:left bottom;
+}
+
+[ui-fit~=ct]{
+  object-position:center top;
+}
+
+[ui-fit~=cm]{
+  object-position:center center;
+}
+
+[ui-fit~=cb]{
+  object-position:center bottom;
+}
+
+[ui-fit~=rt]{
+  object-position:right top;
+}
+
+[ui-fit~=rm]{
+  object-position:right center;
+}
+
+[ui-fit~=rb]{
+  object-position:right bottom;
+}
+
 .ux-none,.ux-none *,.ux-none-sub>*,.ux-none-sub>* *{
   cursor:pointer;
   user-select:none;