--- @fox/styles/_fox-file-upload.scss
+++ @fox/styles/_fox-file-upload.scss
... | ... | @@ -127,10 +127,12 @@ |
| 127 | 127 |
block-size: fox.icon(6); |
| 128 | 128 |
} |
| 129 | 129 |
|
| 130 |
+ // 잘라내지 않고 상자 안에 다 보이게 담는다 — 고른 그림이 어떻게 생겼는지 확인하는 |
|
| 131 |
+ // 자리라 일부만 보이면 확인이 되지 않는다. |
|
| 130 | 132 |
&__thumb-image {
|
| 131 | 133 |
inline-size: 100%; |
| 132 | 134 |
block-size: 100%; |
| 133 |
- object-fit: cover; |
|
| 135 |
+ object-fit: contain; |
|
| 134 | 136 |
} |
| 135 | 137 |
|
| 136 | 138 |
&__thumb-remove {
|
--- app/(protected)/(basic)/decoration-items/_components/decoration-item-list.module.scss
+++ app/(protected)/(basic)/decoration-items/_components/decoration-item-list.module.scss
... | ... | @@ -1,4 +1,5 @@ |
| 1 |
-// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4 · cover). |
|
| 1 |
+// 목록 표의 썸네일 — 시안 ADM_ITM_101의 `img-thumb`(80×80 · 1px 테두리 · radius 4). |
|
| 2 |
+// 그림은 잘라내지 않고 상자 안에 다 보이게 담는다(contain) — 아이템 생김새가 정보다. |
|
| 2 | 3 |
// @fox에 이미지 조각이 없어 이 화면 전용으로 둔다(값은 전부 @fox 토큰). |
| 3 | 4 |
|
| 4 | 5 |
@use "@fox/styles/abstracts" as fox; |
... | ... | @@ -8,5 +9,5 @@ |
| 8 | 9 |
block-size: 8rem; |
| 9 | 10 |
border: fox.border(1) solid fox.color(border-neutral-subtler); |
| 10 | 11 |
border-radius: fox.radius(2); |
| 11 |
- object-fit: cover; |
|
| 12 |
+ object-fit: contain; |
|
| 12 | 13 |
} |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?