fix: image-frame width, height

junghyeonsu · junghyeonsu · commit 2cd34b82734c · 2026-02-04T12:35:02.000+09:00
diff --git a/.changeset/fruity-drinks-mate.md b/.changeset/fruity-drinks-mate.md
@@ -0,0 +1,5 @@
+---
+"@seed-design/css": patch
+---
+
+ImageFrame 내부 요소에 width, height 100%를 추가합니다
diff --git a/packages/css/all.css b/packages/css/all.css
@@ -4575,6 +4575,9 @@
 
 .seed-image-frame > img, .seed-image-frame > video {
   object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .seed-image-frame--rounded_true {
diff --git a/packages/css/all.min.css b/packages/css/all.min.css
diff --git a/packages/css/recipes/image-frame.css b/packages/css/recipes/image-frame.css
@@ -2,6 +2,9 @@
     position: relative;
 }
 .seed-image-frame > img, .seed-image-frame > video {
+    display: block;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
 }
 .seed-image-frame--rounded_true {
diff --git a/packages/qvism-preset/src/recipes/image-frame.ts b/packages/qvism-preset/src/recipes/image-frame.ts
@@ -7,6 +7,9 @@ const imageFrame = defineRecipe({
     position: "relative",
 
     "& > img, & > video": {
+      display: "block",
+      width: "100%",
+      height: "100%",
       objectFit: "cover",
     },
   },

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@seed-design/css": patch
 +---
++
 +ImageFrame 내부 요소에 width, height 100%를 추가합니다
Original file line number	Diff line number	Diff line change
`@@ -4575,6 +4575,9 @@`
`4575`	`4575`
`4576`	`4576`	`.seed-image-frame > img, .seed-image-frame > video {`
`4577`	`4577`	`object-fit: cover;`
	`4578`	`+ width: 100%;`
	`4579`	`+ height: 100%;`
	`4580`	`+ display: block;`
`4578`	`4581`	`}`
`4579`	`4582`
`4580`	`4583`	`.seed-image-frame--rounded_true {`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,9 @@`
`2`	`2`	`position: relative;`
`3`	`3`	`}`
`4`	`4`	`.seed-image-frame > img, .seed-image-frame > video {`
	`5`	`+ display: block;`
	`6`	`+ width: 100%;`
	`7`	`+ height: 100%;`
`5`	`8`	`object-fit: cover;`
`6`	`9`	`}`
`7`	`10`	`.seed-image-frame--rounded_true {`