Fix layout shift when loading blog post (#3232)

## Description

In WATonomous/infra-config#3230, we used
`w-auto` to fix the blurred placeholder showing up behind the image.
However, this introduced a layout shift bug. Here's the before/after:


https://github.com/user-attachments/assets/391fc735-831f-4bbd-92b4-353a8a20b0ab

This PR sets the placeholder to be `contain`ed in the container and
reverts the w-auto change. This fixes the bug.

However, now, the click box of the image is the container instead of the
image itself. In cases where the container is larger than the image
(e.g. for square images), clicking beside the image opens the popup too.
This is a minor bug and there's no clear way to address both that issue
and the layout shift issue, let's just keep it as-is for now. We'll try
to use wide images when possible, which don't have this issue.


## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code

components/blog-post.tsx

@@ -112,7 +112,7 @@ export function BlogPostHeader() {
                     <Picture
                         image={titleImage}
                         alt={titleImageAttribution}
-                        imgClassName='max-h-96 w-auto'
+                        imgClassName='max-h-96 object-contain'
                     />
                 </PopoverTrigger>
                 <PopoverContent side='bottom' className="w-96 max-w-full">

components/picture.tsx

@@ -41,7 +41,7 @@ export default function Picture({
   )}")`;
 
   const placeholderStyle = {
-    backgroundSize: "cover",
+    backgroundSize: "contain",
     backgroundPosition: "50% 50%",
     backgroundRepeat: "no-repeat",
     backgroundImage,