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>

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 {

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;

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 {

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 {

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);
       });

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);
       });