From 8e0b5ae45469c41f5e3c535e4a321ed49a017963 Mon Sep 17 00:00:00 2001
From: allin2 <allin2@users.noreply.github.com>
Date: Tue, 23 Jun 2026 20:11:04 +0800
Subject: [PATCH] fix(image): use CSS styles for width/height to support
 percentage values

The ImageOutput component used HTML attributes for width/height, which
only accept pixel values. This prevented percentage values like '100%'
from working.

Changed to use CSS styles instead of HTML attributes, which support
both pixel values and percentage values.

Fixes #9810
---
 .../src/components/editor/output/ImageOutput.tsx  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/editor/output/ImageOutput.tsx b/frontend/src/components/editor/output/ImageOutput.tsx
index 7da669b6ef2..896af23c83f 100644
--- a/frontend/src/components/editor/output/ImageOutput.tsx
+++ b/frontend/src/components/editor/output/ImageOutput.tsx
@@ -5,8 +5,8 @@ import type { JSX } from "react";
 interface Props {
   src: string;
   alt?: string;
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   className?: string;
 }
 
@@ -17,9 +17,18 @@ export const ImageOutput = ({
   height,
   className,
 }: Props): JSX.Element => {
+  // Convert numeric values to pixel strings, pass string values (like "100%") as-is
+  const style: React.CSSProperties = {};
+  if (width !== undefined) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== undefined) {
+    style.height = typeof height === "number" ? `${height}px` : height;
+  }
+
   return (
     <span className={className}>
-      <img src={src} alt={alt} width={width} height={height} />
+      <img src={src} alt={alt} style={style} />
     </span>
   );
 };