Picture Component

[sullen pine]

Is it possible to add a class to the picture element that is created via the Astro Picture component?

     ``` <Picture
        src={TestimonialImg1}
        formats={["avif", "webp"]}
        fallbackFormat="jpg"
        alt=""
        layout="constrained"
        widths={[320, 480, 640, 800]}
        priority={false}
        class="testimonial__picture"
      />```

My class is on the img itself, and if I do width: 100% and height:100% it doesnt do anything because the picutre is the container and I cant style it

[uneven spindle]

Hi @sullen pine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Yes. To style the outer <picture> element created by Astro’s <Picture /> component, use the pictureAttributes prop. Attributes passed directly to <Picture /> (like class) are applied to the inner <img>, not the <picture>. [Picture ref]

From the docs:

Use this property to apply attributes to the outer <picture> element itself. Attributes applied to the <Picture /> component directly will apply to the inner <img> element, except for those used for image transformation. [Picture ref]

So you can do:

<Picture
  src={TestimonialImg1}
  formats={["avif", "webp"]}
  fallbackFormat="jpg"
  alt=""
  layout="constrained"
  widths={[320, 480, 640, 800]}
  priority={false}
  class="testimonial__img"  // applied to <img>
  pictureAttributes={{ class: "testimonial__picture" }} // applied to <picture>
/>

Then in your CSS:

.testimonial__picture {
  width: 100%;
  height: 100%;
}

.testimonial__img {
  width: 100%;
  height: 100%;
}

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: