picture partial don't cover as expected

[eliasu]

Hey there,

I don't get it: I try to use the picture partial as seen on the docs. I just want to make it covering the div where it lives.

It Says:

cover: boolean, true means the image should cover the containing element.

So I use this code:

<div class="size-32">
        {{ partial src="statamic-peak-tools::components/picture" :image="image" cover="true" sizes="(min-width: 768px) 35vw, 90vw" lazy="true" }}
</div>

This creates the following code in the browser:

<div class="size-32">     
        <!-- this picture element does not cover the containing element -->
        <picture>
                <source srcset="..." 
                        sizes="(min-width: 768px) 35vw, 90vw" type="image/webp">
                <source srcset="..." 
                        sizes="(min-width: 768px) 35vw, 90vw" type="image/jpeg">
                
                <img width="1024" height="384" src="..." alt="." class="object-cover w-full h-full " style="object-position: 98% 92%" aria-hidden="true" loading="lazy">
            
        </picture>
</div>

Do I get something wrong here? As I can see, the problem ist that the picture element is not covering the div element like the docs says. I mean, I could just add those classes in the partial, but I'm guessing I got something wrong here … am I?

Thanks & Peak is awesome!

[robdekort]

Hey, happy to hear. Could it be you're in an inline or flex context? In that case the picture element won't grow as big as its parent.

[eliasu]

Hi,
thanks for your reply. But I think it's not flex or inline. Initially, the outer wrapping element was an<a> tag, but as you see in my code, I changed it to div, and still it does not work…

This is my code:

<div class="relative p-6 border-2 min-h-20">
    <div class="w-32 h-10">
        {{ partial src="statamic-peak-tools::components/picture" :image="magazin_image" cover="true" sizes="(min-width: 768px) 35vw, 90vw" lazy="true" }}
    </div>
    <h3>{{ title }}</h3>
    <p>{{ teaser_text }}</p>
</div>

[robdekort]

Heya, that does exactly what I expect. The image fills the w-32 h-10 container. 🤔

[eliasu]

Oh no … I realized now, where my error is: I had a reset in my custom CSS. I've checked before in dev tools, but I've somehow overseen it. I'm terribly sorry for that silly mistake, but thank you very much for your time, nevertheless.

[robdekort]

No worries.