diff --git a/assets/admin/src/components/form/AksGalleryField.vue b/assets/admin/src/components/form/AksGalleryField.vue
index 63272619..3827cf5e 100644
--- a/assets/admin/src/components/form/AksGalleryField.vue
+++ b/assets/admin/src/components/form/AksGalleryField.vue
@@ -173,12 +173,17 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
 
 <style scoped>
 .aksrt-gallery-field__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
-  gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
 }
 
 .aksrt-gallery-field__item {
+  display: inline-flex;
+  flex-direction: column;
+  max-width: 100%;
+  padding: 4px 4px 0;
   overflow: hidden;
   border: 1px solid var(--aksrt-color-border);
   border-radius: 8px;
@@ -187,21 +192,20 @@ watch(attachmentIds, hydratePreviews, { immediate: true })
 
 .aksrt-gallery-field__image {
   display: block;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: contain;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 90px;
+  border-radius: 4px;
 }
 
 .aksrt-gallery-field__placeholder {
   display: flex;
-  width: 100%;
-  aspect-ratio: 4 / 3;
+  flex-direction: column;
+  width: 90px;
+  height: 90px;
   align-items: center;
   justify-content: center;
-}
-
-.aksrt-gallery-field__placeholder {
-  flex-direction: column;
   gap: 4px;
   color: var(--aksrt-color-muted);
 }
diff --git a/assets/admin/src/components/form/AksMediaField.vue b/assets/admin/src/components/form/AksMediaField.vue
index 673f44d6..68710aaa 100644
--- a/assets/admin/src/components/form/AksMediaField.vue
+++ b/assets/admin/src/components/form/AksMediaField.vue
@@ -12,11 +12,11 @@
         <span class="aksrt-media-field__filename">{{ fileName }}</span>
       </div>
       <div class="aksrt-media-field__overlay">
-        <n-button size="tiny" quaternary @click="openMediaLibrary">
-          <FaIcon icon="fa fas fa-exchange-alt" /> 更换
+        <n-button size="tiny" secondary circle title="更换" @click="openMediaLibrary">
+          <FaIcon icon="fa fas fa-exchange-alt" />
         </n-button>
-        <n-button size="tiny" quaternary type="error" @click="clearMedia">
-          <FaIcon icon="fa fas fa-trash-alt" /> 移除
+        <n-button size="tiny" secondary circle type="error" title="移除" @click="clearMedia">
+          <FaIcon icon="fa fas fa-trash-alt" />
         </n-button>
       </div>
     </div>
@@ -97,15 +97,17 @@ function clearMedia() {
 <style scoped>
 .aksrt-media-field__preview {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 80px;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 72px;
+  min-height: 44px;
+  padding: 4px;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--aksrt-color-border);
   background: var(--aksrt-color-canvas);
   margin-bottom: 8px;
+  vertical-align: top;
 }
 
 .aksrt-media-field__image {
@@ -113,13 +115,11 @@ function clearMedia() {
   width: auto;
   height: auto;
   max-width: 100%;
-  max-height: 200px;
-  object-fit: contain;
+  max-height: 120px;
+  border-radius: 4px;
 }
 
 .aksrt-media-field__file {
-  flex: 1;
-  align-self: stretch;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -139,7 +139,7 @@ function clearMedia() {
   right: 0;
   display: flex;
   gap: 4px;
-  padding: 6px;
+  padding: 4px;
   opacity: 0;
   transition: opacity 0.2s;
 }
diff --git a/assets/css/admin/pay-meta-box.css b/assets/css/admin/pay-meta-box.css
index 15ca7069..27b908fc 100644
--- a/assets/css/admin/pay-meta-box.css
+++ b/assets/css/admin/pay-meta-box.css
@@ -97,8 +97,9 @@
 }
 
 .aksrt-pay-meta__gallery {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 7px;
   margin-bottom: 8px;
 }
@@ -109,10 +110,13 @@
 
 .aksrt-pay-meta__gallery img {
   display: block;
-  width: 100%;
-  aspect-ratio: 1;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 60px;
+  padding: 3px;
+  border: 1px solid #dcdcde;
   border-radius: 4px;
-  object-fit: contain;
   background: #f6f7f7;
 }
 
@@ -334,10 +338,6 @@
     text-align: left;
   }
 
-  .aksrt-pay-meta__gallery {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
   .aksrt-pay-meta__group--inline {
     flex-wrap: wrap;
   }
diff --git a/assets/css/admin/post-extension.css b/assets/css/admin/post-extension.css
index 84defb47..8c74a1dc 100644
--- a/assets/css/admin/post-extension.css
+++ b/assets/css/admin/post-extension.css
@@ -74,8 +74,9 @@
 }
 
 .aksrt-post-extension__gallery {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 5px;
 }
 
@@ -85,10 +86,13 @@
 
 .aksrt-post-extension__gallery img {
   display: block;
-  width: 100%;
-  aspect-ratio: 1;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 60px;
+  padding: 3px;
+  border: 1px solid #dcdcde;
   border-radius: 3px;
-  object-fit: contain;
   background: #f6f7f7;
 }