diff --git a/editor/app.js b/editor/app.js
index bd4359df5c..99271dbdcb 100644
--- a/editor/app.js
+++ b/editor/app.js
@@ -2140,7 +2140,7 @@ function getSpriteHtml(graphicsId, size = 32) {
     const url = getSpriteUrl(graphicsId);
     const name = (graphicsId || '').replace('OBJ_EVENT_GFX_', '').replace(/_/g, ' ');
     return `<div class="sprite-container" style="width:${size}px;height:${size}px">
-        <img src="${url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" style="width:${size}px;height:${size}px;image-rendering:pixelated" alt="${escAttr(name)}">
+        <img src="${url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" style="height:${size}px;width:auto;image-rendering:pixelated" alt="${escAttr(name)}">
         <div class="sprite-fallback" style="display:none;width:${size}px;height:${size}px">${escHtml(name.substring(0, 2).toUpperCase())}</div>
     </div>`;
 }
diff --git a/editor/style.css b/editor/style.css
index 5b9e35178b..a3f4fc7f6d 100644
--- a/editor/style.css
+++ b/editor/style.css
@@ -1200,7 +1200,7 @@ tbody tr:last-child td { border-bottom: none; }
     background: var(--bg);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .sprite-fallback {
     align-items: center;