diff --git a/app/Services/Media/MediaOptimizer.php b/app/Services/Media/MediaOptimizer.php
index d2a7b7a7..6c13c0fc 100644
--- a/app/Services/Media/MediaOptimizer.php
+++ b/app/Services/Media/MediaOptimizer.php
@@ -148,6 +148,39 @@ public function cropToAspectRatio(string $filePath, float $ratio): string
         return $tempFile;
     }
 
+    /**
+     * Fit an image inside a width×height canvas without cropping: the image is
+     * scaled to fit and centered, and the empty space is filled with a blurred,
+     * slightly darkened copy of the image. When the image already matches the
+     * canvas ratio it's just scaled down (no background). Returns a temp file.
+     */
+    public function fitToCanvas(string $filePath, int $width, int $height): string
+    {
+        $foreground = $this->manager->decodePath($filePath);
+        $canvasRatio = $width / $height;
+        $imageRatio = $foreground->width() / $foreground->height();
+
+        $tempFile = tempnam(sys_get_temp_dir(), 'media_fit_');
+
+        if (abs($imageRatio - $canvasRatio) < 0.01) {
+            $sized = $foreground->scaleDown($width, $height);
+            file_put_contents($tempFile, (string) $sized->encodeUsingMediaType('image/jpeg', quality: 100));
+
+            return $tempFile;
+        }
+
+        $canvas = $this->manager->decodePath($filePath)
+            ->cover($width, $height)
+            ->blur(40)
+            ->brightness(-12);
+
+        $canvas->insert($foreground->scaleDown($width, $height), 0, 0, 'center');
+
+        file_put_contents($tempFile, (string) $canvas->encodeUsingMediaType('image/jpeg', quality: 100));
+
+        return $tempFile;
+    }
+
     /**
      * @return array{max_width: int, max_size: int, format: string, quality: int}
      */
diff --git a/app/Services/Social/Concerns/CropsImageForAspectRatio.php b/app/Services/Social/Concerns/CropsImageForAspectRatio.php
index ae4cefdb..d2c67d9c 100644
--- a/app/Services/Social/Concerns/CropsImageForAspectRatio.php
+++ b/app/Services/Social/Concerns/CropsImageForAspectRatio.php
@@ -50,6 +50,35 @@ protected function cropImageForAspectRatio(string $imageUrl, ?string $aspectRati
         }
     }
 
+    /**
+     * Fit the image inside a width×height canvas with a blurred-background
+     * extension (no cropping), host it, and return a public URL. Used for
+     * stories so an off-ratio image isn't clipped by the platform.
+     */
+    protected function fitImageToCanvas(string $imageUrl, int $width, int $height): string
+    {
+        $tempInput = tempnam(sys_get_temp_dir(), 'fit_in_');
+
+        try {
+            $download = Http::sink($tempInput)->timeout(120)->get($imageUrl);
+
+            if ($download->failed()) {
+                throw $this->cropFailureException('Failed to download image for story fitting');
+            }
+
+            $fitted = app(MediaOptimizer::class)->fitToCanvas($tempInput, $width, $height);
+
+            $path = self::CROP_DIRECTORY.'/'.Str::uuid()->toString().'.jpg';
+            Storage::put($path, file_get_contents($fitted));
+
+            @unlink($fitted);
+
+            return Storage::url($path);
+        } finally {
+            @unlink($tempInput);
+        }
+    }
+
     protected function aspectRatioToFloat(string $ratio): float
     {
         return AspectRatio::tryFrom($ratio)?->toFloat() ?? 1.0;
diff --git a/app/Services/Social/InstagramPublisher.php b/app/Services/Social/InstagramPublisher.php
index 23e684d8..388f3808 100644
--- a/app/Services/Social/InstagramPublisher.php
+++ b/app/Services/Social/InstagramPublisher.php
@@ -158,7 +158,8 @@ private function publishStory(string $instagramId, string $accessToken, $media):
         if ($isVideo) {
             $params['video_url'] = $media->url;
         } else {
-            $params['image_url'] = $media->url;
+            $dimensions = ContentType::InstagramStory->aiImageDimensions();
+            $params['image_url'] = $this->fitImageToCanvas($media->url, $dimensions['width'], $dimensions['height']);
         }
 
         // Step 1: Create story container
diff --git a/resources/js/components/posts/previews/FacebookPreview.vue b/resources/js/components/posts/previews/FacebookPreview.vue
index f0302ae2..9227cd52 100644
--- a/resources/js/components/posts/previews/FacebookPreview.vue
+++ b/resources/js/components/posts/previews/FacebookPreview.vue
@@ -3,6 +3,7 @@ import { IconDots, IconPhoto } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
+import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -214,17 +215,15 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== REELS ==================== -->
         <template v-else-if="isReel">
-            <div class="relative flex-1 bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Video/Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center bg-[#18191a]"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center bg-[#18191a]">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Gradient overlay -->
                 <div v-if="media.length > 0"
@@ -353,17 +352,15 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== STORIES ==================== -->
         <template v-else-if="isStory">
-            <div class="relative flex-1 bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Progress Bars -->
                 <div v-if="media.length > 0" class="absolute top-1 left-2 right-2 flex gap-0.5 z-10">
diff --git a/resources/js/components/posts/previews/InstagramPreview.vue b/resources/js/components/posts/previews/InstagramPreview.vue
index c442b604..63ad2b0a 100644
--- a/resources/js/components/posts/previews/InstagramPreview.vue
+++ b/resources/js/components/posts/previews/InstagramPreview.vue
@@ -14,6 +14,7 @@ import {
 import { computed } from 'vue';
 
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
+import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import { ContentType } from '@/types/content-type';
 import type { MediaItem } from '@/types/media';
 
@@ -163,17 +164,15 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 
         <!-- ==================== REELS ==================== -->
         <template v-else-if="isReel">
-            <div class="relative flex-1 bg-[#fafafa] dark:bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Video/Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPlayerPlayFilled"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center">
+                            <IconPlayerPlayFilled class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Top Bar - below status bar -->
                 <div class="absolute top-1 left-0 right-0 px-3 flex items-center justify-between z-10">
@@ -229,17 +228,15 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 
         <!-- ==================== STORIES ==================== -->
         <template v-else-if="isStory">
-            <div class="relative flex-1 bg-[#fafafa] dark:bg-black overflow-hidden">
+            <div class="relative flex-1 overflow-hidden">
                 <!-- Media - Full screen -->
-                <div class="absolute inset-0">
-                    <PostMediaPreview
-                        :media="media"
-                        :placeholder-icon="IconPhoto"
-                        :show-arrows="false"
-                        :show-dots="false"
-                        placeholder-class="w-full h-full flex items-center justify-center"
-                    />
-                </div>
+                <VerticalMediaCanvas :media="media">
+                    <template #placeholder>
+                        <div class="flex h-full w-full items-center justify-center">
+                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                        </div>
+                    </template>
+                </VerticalMediaCanvas>
 
                 <!-- Progress Bars - below status bar -->
                 <div class="absolute top-0.5 left-2 right-2 flex gap-0.5 z-10">
diff --git a/resources/js/components/posts/previews/TikTokPreview.vue b/resources/js/components/posts/previews/TikTokPreview.vue
index ee91a4b8..23920184 100644
--- a/resources/js/components/posts/previews/TikTokPreview.vue
+++ b/resources/js/components/posts/previews/TikTokPreview.vue
@@ -2,8 +2,7 @@
 import { IconPlus } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
-import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
-import { isVideoMedia } from '@/composables/useMedia';
+import VerticalMediaCanvas from "@/components/posts/previews/VerticalMediaCanvas.vue";
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -39,21 +38,16 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 <template>
     <div class="w-full h-full bg-black text-white overflow-hidden flex flex-col relative">
         <!-- Video/Media Area - Full screen -->
-        <div class="absolute inset-0">
-            <!-- Video content -->
-            <div v-if="media.length > 0 && isVideoMedia(media[0])" class="w-full h-full">
-                <VideoPreview :src="media[0].url" />
-            </div>
-            <div v-else-if="media.length > 0" class="w-full h-full">
-                <img :src="media[0].url" :alt="media[0].original_filename" class="w-full h-full object-cover" />
-            </div>
-            <div v-else class="w-full h-full flex items-center justify-center bg-[#161823]">
-                <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                        d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
-                </svg>
-            </div>
-        </div>
+        <VerticalMediaCanvas :media="media">
+            <template #placeholder>
+                <div class="flex h-full w-full items-center justify-center bg-[#161823]">
+                    <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
+                    </svg>
+                </div>
+            </template>
+        </VerticalMediaCanvas>
 
         <!-- Top Header (only when media exists) -->
         <div v-if="media.length > 0"
diff --git a/resources/js/components/posts/previews/VerticalMediaCanvas.vue b/resources/js/components/posts/previews/VerticalMediaCanvas.vue
new file mode 100644
index 00000000..97cc7181
--- /dev/null
+++ b/resources/js/components/posts/previews/VerticalMediaCanvas.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { IconPhoto } from '@tabler/icons-vue';
+import { computed } from 'vue';
+
+import VideoPreview from '@/components/posts/previews/VideoPreview.vue';
+import { isVideoMedia } from '@/composables/useMedia';
+import type { MediaItem } from '@/types/media';
+
+const props = defineProps<{
+    media: MediaItem[];
+}>();
+
+const item = computed<MediaItem | null>(() => props.media[0] ?? null);
+</script>
+
+<template>
+    <div class="absolute inset-0 overflow-hidden bg-black">
+        <template v-if="item">
+            <VideoPreview v-if="isVideoMedia(item)" :src="item.url" video-class="h-full w-full object-cover" />
+            <template v-else>
+                <img :src="item.url" alt="" aria-hidden="true"
+                    class="absolute inset-0 h-full w-full scale-110 object-cover blur-2xl brightness-90" />
+                <img :src="item.url" :alt="item.original_filename"
+                    class="absolute inset-0 h-full w-full object-contain" />
+            </template>
+        </template>
+        <template v-else>
+            <slot name="placeholder">
+                <div class="flex h-full w-full items-center justify-center">
+                    <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
+                </div>
+            </slot>
+        </template>
+    </div>
+</template>
diff --git a/resources/js/components/posts/previews/YouTubePreview.vue b/resources/js/components/posts/previews/YouTubePreview.vue
index 9882b3b2..3c111e5d 100644
--- a/resources/js/components/posts/previews/YouTubePreview.vue
+++ b/resources/js/components/posts/previews/YouTubePreview.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
-import { isVideoMedia } from '@/composables/useMedia';
+import VerticalMediaCanvas from "@/components/posts/previews/VerticalMediaCanvas.vue";
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -38,22 +37,17 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 <template>
     <div class="w-full h-full bg-[#0f0f0f] text-white overflow-hidden flex flex-col relative">
         <!-- Video/Media Area - Full screen -->
-        <div class="absolute inset-0">
-            <!-- Video content -->
-            <div v-if="media.length > 0 && isVideoMedia(media[0])" class="w-full h-full">
-                <VideoPreview :src="media[0].url" />
-            </div>
-            <div v-else-if="media.length > 0" class="w-full h-full">
-                <img :src="media[0].url" :alt="media[0].original_filename" class="w-full h-full object-cover" />
-            </div>
-            <div v-else class="w-full h-full flex items-center justify-center bg-[#0f0f0f]">
-                <!-- YouTube Shorts icon -->
-                <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                        d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
-                </svg>
-            </div>
-        </div>
+        <VerticalMediaCanvas :media="media">
+            <template #placeholder>
+                <div class="flex h-full w-full items-center justify-center bg-[#0f0f0f]">
+                    <!-- YouTube Shorts icon -->
+                    <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
+                    </svg>
+                </div>
+            </template>
+        </VerticalMediaCanvas>
 
         <!-- Top Header -->
         <div v-if="media.length > 0"
diff --git a/resources/js/composables/useMedia.ts b/resources/js/composables/useMedia.ts
index c421a191..38a08d8e 100644
--- a/resources/js/composables/useMedia.ts
+++ b/resources/js/composables/useMedia.ts
@@ -107,7 +107,7 @@ export const getMediaValidationWarning = (
             };
         }
 
-        if (width > 0 && height > 0) {
+        if (width > 0 && height > 0 && ! (rules.autoFitsImage && isImage(m))) {
             const ratio = width / height;
             if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) {
                 return {
@@ -163,7 +163,7 @@ export const getMediaItemIssue = (item: MediaItem, contentType: string): string
 
     const width = item.meta?.width ?? 0;
     const height = item.meta?.height ?? 0;
-    if (width > 0 && height > 0) {
+    if (width > 0 && height > 0 && ! (rules.autoFitsImage && ! itemIsVideo)) {
         const ratio = width / height;
         if (rules.aspectRatioMin && ratio < rules.aspectRatioMin) return 'aspect_ratio_too_narrow';
         if (rules.aspectRatioMax && ratio > rules.aspectRatioMax) return 'aspect_ratio_too_wide';
diff --git a/resources/js/composables/useMediaRules.ts b/resources/js/composables/useMediaRules.ts
index ab0bc204..75407f9d 100644
--- a/resources/js/composables/useMediaRules.ts
+++ b/resources/js/composables/useMediaRules.ts
@@ -17,6 +17,9 @@ export interface MediaRules {
     maxVideoDurationSec?: number;
     aspectRatioMin?: number;
     aspectRatioMax?: number;
+    // Images off the target ratio are auto-fitted with a blurred background at
+    // publish time, so the aspect-ratio warning is suppressed for images.
+    autoFitsImage?: boolean;
 }
 
 const MB = 1024 * 1024;
@@ -40,7 +43,7 @@ const CONTENT_TYPE_RULES: Record<string, MediaRules> = {
         maxFiles: 1, acceptImages: true, acceptVideos: true, requiresMedia: true,
         acceptsGif: false,
         maxImageBytes: 8 * MB, maxVideoBytes: 100 * MB, maxVideoDurationSec: 60,
-        aspectRatioMin: 0.5, aspectRatioMax: 0.6,
+        aspectRatioMin: 0.5, aspectRatioMax: 0.6, autoFitsImage: true,
     },
 
     // Facebook
diff --git a/tests/Feature/Services/InstagramPublisherTest.php b/tests/Feature/Services/InstagramPublisherTest.php
index edf126fa..d0f9bc7f 100644
--- a/tests/Feature/Services/InstagramPublisherTest.php
+++ b/tests/Feature/Services/InstagramPublisherTest.php
@@ -9,8 +9,10 @@
 use App\Models\PostPlatform;
 use App\Models\SocialAccount;
 use App\Models\Workspace;
+use App\Services\Media\MediaOptimizer;
 use App\Services\Social\InstagramPublisher;
 use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
 
 beforeEach(function () {
     $this->workspace = Workspace::factory()->create();
@@ -77,13 +79,24 @@
 });
 
 test('instagram publisher publishes story', function () {
+    Storage::fake();
     $this->postPlatform->update(['content_type' => ContentType::InstagramStory]);
 
+    $mockOptimizer = Mockery::mock(MediaOptimizer::class);
+    $mockOptimizer->shouldReceive('fitToCanvas')->once()->with(Mockery::type('string'), 1080, 1920)->andReturnUsing(function (string $tempFile) {
+        $out = tempnam(sys_get_temp_dir(), 'ig_fit_');
+        copy($tempFile, $out);
+
+        return $out;
+    });
+    app()->instance(MediaOptimizer::class, $mockOptimizer);
+
     Http::fake([
         '*/12345678/media' => Http::response(['id' => 'container-123'], 200),
         '*/container-123*' => Http::response(['status_code' => 'FINISHED'], 200),
         '*/12345678/media_publish' => Http::response(['id' => 'story-123'], 200),
         '*/story-123*' => Http::response(['permalink' => 'https://instagram.com/stories/abc123'], 200),
+        '*' => Http::response(file_get_contents(__DIR__.'/../../fixtures/1x1.png'), 200, ['Content-Type' => 'image/png']),
     ]);
 
     $this->post->update([
diff --git a/tests/Feature/Services/Social/InstagramPublisherTest.php b/tests/Feature/Services/Social/InstagramPublisherTest.php
index 30ff943b..8cc87cc3 100644
--- a/tests/Feature/Services/Social/InstagramPublisherTest.php
+++ b/tests/Feature/Services/Social/InstagramPublisherTest.php
@@ -11,6 +11,7 @@
 use App\Models\SocialAccount;
 use App\Models\User;
 use App\Models\Workspace;
+use App\Services\Media\MediaOptimizer;
 use App\Services\Social\InstagramPublisher;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
@@ -140,11 +141,11 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
     });
 });
 
-test('instagram publisher can publish image story', function () {
+test('instagram publisher fits an image story to 9:16 and posts the hosted copy', function () {
+    Storage::fake();
     $this->postPlatform->update(['content_type' => ContentType::InstagramStory]);
 
     $this->post->update([
-
         'media' => [
             [
                 'id' => 'test-media-story',
@@ -154,9 +155,19 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
                 'original_filename' => 'story.jpg',
             ],
         ],
-
     ]);
 
+    // The fit itself is covered by MediaOptimizerTest; here we only assert the
+    // story is built from the hosted, fitted copy (9:16 canvas).
+    $mockOptimizer = Mockery::mock(MediaOptimizer::class);
+    $mockOptimizer->shouldReceive('fitToCanvas')->once()->with(Mockery::type('string'), 1080, 1920)->andReturnUsing(function (string $tempFile) {
+        $out = tempnam(sys_get_temp_dir(), 'ig_fit_');
+        copy($tempFile, $out);
+
+        return $out;
+    });
+    app()->instance(MediaOptimizer::class, $mockOptimizer);
+
     Http::fake([
         'https://graph.instagram.com/v25.0/ig_123456789/media' => Http::response([
             'id' => 'story-container-123',
@@ -170,6 +181,7 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
         'https://graph.instagram.com/v25.0/story-123456789*' => Http::response([
             'permalink' => 'https://www.instagram.com/stories/testuser/123/',
         ], 200),
+        '*' => Http::response(file_get_contents(__DIR__.'/../../../fixtures/1x1.png'), 200, ['Content-Type' => 'image/png']),
     ]);
 
     $result = $this->publisher->publish($this->postPlatform);
@@ -177,7 +189,12 @@ function fakeJpegBytes(int $width = 1200, int $height = 800): string
     expect($result['id'])->toBe('story-123456789');
 
     Http::assertSent(function ($request) {
-        return str_contains($request->url(), '/ig_123456789/media');
+        if (! str_contains($request->url(), '/ig_123456789/media') || str_contains($request->url(), 'media_publish')) {
+            return false;
+        }
+        $imageUrl = (string) data_get($request->data(), 'image_url', '');
+
+        return str_contains($imageUrl, 'social-crops/') && ! str_contains($imageUrl, 'example.com');
     });
 });
 
diff --git a/tests/Unit/Services/Media/MediaOptimizerTest.php b/tests/Unit/Services/Media/MediaOptimizerTest.php
index 54c7cae3..76088578 100644
--- a/tests/Unit/Services/Media/MediaOptimizerTest.php
+++ b/tests/Unit/Services/Media/MediaOptimizerTest.php
@@ -213,3 +213,33 @@ function createTestImage(int $width, int $height, string $format = 'image/jpeg')
     expect($cropped->width())->toBe(800);
     expect($cropped->height())->toBe(800);
 });
+
+it('fits a wide image into a 9:16 canvas (blurred background, no crop)', function () use (&$tempFiles) {
+    $source = createTestImage(1200, 900); // 4:3
+    $tempFiles[] = $source;
+
+    $optimizer = new MediaOptimizer;
+    $result = $optimizer->fitToCanvas($source, 1080, 1920);
+    $tempFiles[] = $result;
+
+    $manager = new ImageManager(Driver::class);
+    $out = $manager->decodePath($result);
+
+    expect($out->width())->toBe(1080)
+        ->and($out->height())->toBe(1920);
+});
+
+it('does not letterbox an image that already matches the canvas ratio', function () use (&$tempFiles) {
+    $source = createTestImage(1080, 1920); // already 9:16
+    $tempFiles[] = $source;
+
+    $optimizer = new MediaOptimizer;
+    $result = $optimizer->fitToCanvas($source, 1080, 1920);
+    $tempFiles[] = $result;
+
+    $manager = new ImageManager(Driver::class);
+    $out = $manager->decodePath($result);
+
+    $ratio = $out->width() / $out->height();
+    expect(abs($ratio - 9 / 16))->toBeLessThan(0.01);
+});