From 7d61de70e35086286478d96a9b9795477fc1f78f Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 28 Oct 2026 15:58:01 +0800
Subject: [PATCH] fix(admin): keep image previews at natural aspect ratio

Media/gallery previews no longer stretch or crop: use object-fit contain,
natural sizing for single media, and the uncropped medium size instead of
the square thumbnail for gallery and native meta-box previews.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../admin/src/components/form/AksGalleryField.vue   | 11 ++++++++---
 assets/admin/src/components/form/AksMediaField.vue  | 13 +++++++++++--
 assets/css/admin/pay-meta-box.css                   |  3 ++-
 assets/css/admin/post-extension.css                 |  3 ++-
 assets/js/admin-pay-meta-box.js                     |  2 +-
 assets/js/admin-post-extension.js                   |  2 +-
 6 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/assets/admin/src/components/form/AksGalleryField.vue b/assets/admin/src/components/form/AksGalleryField.vue
index 3b6cc7c6..63272619 100644
--- a/assets/admin/src/components/form/AksGalleryField.vue
+++ b/assets/admin/src/components/form/AksGalleryField.vue
@@ -124,7 +124,7 @@ async function hydratePreviews() {
 
     const sizes = attachment.get('sizes') || {}
     return [attachmentId, {
-      url: sizes.thumbnail?.url || sizes.medium?.url || attachment.get('url') || '',
+      url: sizes.medium?.url || attachment.get('url') || '',
       alt: attachment.get('alt') || attachment.get('title') || '',
     }]
   }))
@@ -185,14 +185,19 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
   background: var(--aksrt-color-canvas);
 }
 
-.aksrt-gallery-field__image,
+.aksrt-gallery-field__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: contain;
+}
+
 .aksrt-gallery-field__placeholder {
   display: flex;
   width: 100%;
   aspect-ratio: 4 / 3;
   align-items: center;
   justify-content: center;
-  object-fit: cover;
 }
 
 .aksrt-gallery-field__placeholder {
diff --git a/assets/admin/src/components/form/AksMediaField.vue b/assets/admin/src/components/form/AksMediaField.vue
index d56b4959..673f44d6 100644
--- a/assets/admin/src/components/form/AksMediaField.vue
+++ b/assets/admin/src/components/form/AksMediaField.vue
@@ -97,20 +97,29 @@ function clearMedia() {
 <style scoped>
 .aksrt-media-field__preview {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 80px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--aksrt-color-border);
+  background: var(--aksrt-color-canvas);
   margin-bottom: 8px;
 }
 
 .aksrt-media-field__image {
   display: block;
-  width: 100%;
+  width: auto;
+  height: auto;
+  max-width: 100%;
   max-height: 200px;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .aksrt-media-field__file {
+  flex: 1;
+  align-self: stretch;
   display: flex;
   align-items: center;
   gap: 8px;
diff --git a/assets/css/admin/pay-meta-box.css b/assets/css/admin/pay-meta-box.css
index 025c7cfa..15ca7069 100644
--- a/assets/css/admin/pay-meta-box.css
+++ b/assets/css/admin/pay-meta-box.css
@@ -112,7 +112,8 @@
   width: 100%;
   aspect-ratio: 1;
   border-radius: 4px;
-  object-fit: cover;
+  object-fit: contain;
+  background: #f6f7f7;
 }
 
 .aksrt-pay-meta__group {
diff --git a/assets/css/admin/post-extension.css b/assets/css/admin/post-extension.css
index c210d770..84defb47 100644
--- a/assets/css/admin/post-extension.css
+++ b/assets/css/admin/post-extension.css
@@ -88,7 +88,8 @@
   width: 100%;
   aspect-ratio: 1;
   border-radius: 3px;
-  object-fit: cover;
+  object-fit: contain;
+  background: #f6f7f7;
 }
 
 .aksrt-post-extension__radios {
diff --git a/assets/js/admin-pay-meta-box.js b/assets/js/admin-pay-meta-box.js
index d8e07560..1dd74519 100644
--- a/assets/js/admin-pay-meta-box.js
+++ b/assets/js/admin-pay-meta-box.js
@@ -58,7 +58,7 @@
       wp.media.attachment(id).fetch().then(function () {
         var data = wp.media.attachment(id).toJSON();
         var image = document.createElement('img');
-        image.src = (data.sizes && data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url) || '';
+        image.src = (data.sizes && data.sizes.medium ? data.sizes.medium.url : data.url) || '';
         image.alt = data.alt || '';
         preview.appendChild(image);
       });
diff --git a/assets/js/admin-post-extension.js b/assets/js/admin-post-extension.js
index 553dd300..879e5908 100644
--- a/assets/js/admin-post-extension.js
+++ b/assets/js/admin-post-extension.js
@@ -34,7 +34,7 @@
       wp.media.attachment(id).fetch().then(function () {
         var data = wp.media.attachment(id).toJSON();
         var img = document.createElement('img');
-        img.src = (data.sizes && data.sizes.thumbnail ? data.sizes.thumbnail.url : data.url) || '';
+        img.src = (data.sizes && data.sizes.medium ? data.sizes.medium.url : data.url) || '';
         img.alt = data.alt || '';
         preview.appendChild(img);
       });