enhanced:img issue with row-span-3 and aspect-square

[michaelprys]

Describe the bug

Whenever I use enhanced:img with these 2 tailwind classes: row-span-3 and aspect-square, they're being ignored. If I use regular img it works as expected. Tried in both dev and prod - same issue.

Reproduction

I've made a reproduction on Stackblitz, but unfortunately Stackblitz doesn't work with enhanced:img for some reason. You can download it and try locally: https://stackblitz.com/edit/sveltejs-kit-template-default-4jhpwv?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.0
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.0
    @sveltejs/enhanced-img: ^0.3.10 => 0.3.10
    @sveltejs/kit: ^2.0.0 => 2.7.2
    @sveltejs/kit: ^2.0.0 => 2.7.2
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0
    svelte: ^5.0.0 => 5.1.0
    svelte: ^5.0.0 => 5.1.0
    svelte: ^5.0.0 => 5.1.0
    svelte: ^5.0.0 => 5.1.0
    vite: ^5.0.3 => 5.4.10
  Browsers:
    Edge: Chromium
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.8.0 - ~\AppData\Local\pnpm\pnpm.CMD
  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE

Severity

serious, but I can work around it

Additional Information

No response

[michaelprys]

This issue is directly related to <picture>, which is generated by enhanced:img. To solve the issue, remove class="row-span-3" from <enhanced:img /> and wrap it in a <div> with the class class="row-span-3" instead:

<div class="row-span-3">
    <enhanced:img
        class="rounded-2xl object-cover w-full h-full"
        src="/static/images/home/intro.jpg"
        alt="Intro"
    />
</div>

[michaelprys]

When I put class="row-span-3" on a <picture> element, it works as expected, because <picture> is grid item, unlike <img>:

<picture class="row-span-3">
    <source srcset="/static/images/home/intro.webp" type="image/webp" />
    <img
        class="rounded-2xl object-cover w-full h-full"
        src="/static/images/home/intro.jpg"
        alt="Intro"
    />
</picture>

Is there a way to make the row-span work directly on <enhanced:img> without needing to wrap it in a <div>? If not, can this be improved in future updates to support CSS Grid properties better?