diff --git a/src/components/ResultGrid.tsx b/src/components/ResultGrid.tsx
index 7e68dd1..0b0f630 100644
--- a/src/components/ResultGrid.tsx
+++ b/src/components/ResultGrid.tsx
@@ -9,6 +9,19 @@ export type ResultGridProps = {
   onAction: (imageId: string, action: 'select' | 'reject' | 'reset') => void;
 };
 
+function cssRatioToNumber(ratio: string | undefined) {
+  if (!ratio) return 1;
+  const [w, h] = ratio.split('/').map(part => Number(part.trim()));
+  return w && h ? w / h : 1;
+}
+
+function thumbnailWidth(ratio: string | undefined) {
+  const value = cssRatioToNumber(ratio);
+  if (value > 1.35) return 'min(100%, 220px)';
+  if (value < 0.8) return 'min(100%, 92px)';
+  return 'min(100%, 156px)';
+}
+
 export default function ResultGrid({ images, onAction }: ResultGridProps) {
   const [ratios, setRatios] = useState<Record<string, string>>({});
 
@@ -58,7 +71,7 @@ export default function ResultGrid({ images, onAction }: ResultGridProps) {
           <div
             key={img.id}
             className={`tile group ${img.status === 'selected' ? 'tile-selected' : ''} ${img.status === 'rejected' ? 'tile-rejected' : ''}`}
-            style={{ aspectRatio: ratios[img.id] ?? '1 / 1' }}
+            style={{ aspectRatio: ratios[img.id] ?? '1 / 1', width: thumbnailWidth(ratios[img.id]), maxWidth: '100%' }}
           >
             <HoverImagePreview
               src={img.url}