Fix blog post title image display (#3233)

## Description

For some reason, the blurred placeholder image that nextjs generates can
be of a different size than the original image. The title image we are
using is `1792 × 1024 px` (aspect ratio 1.75) but the blurred image is
`240 x 150 px` (aspect ratio 1.6). Perhaps nextjs uses a few fixed
sizes. When we switched from `cover` to `contain` for the blurred image
in #3232, it resulted in a noticeable flicker. This PR takes a different
approach to fixing the layout problem. This fixes both the layout shift
and makes sure the image clickbox is correct at all times.

Before/after:


https://github.com/user-attachments/assets/8ea2732c-285d-4e48-9489-b8687f436288


## 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,12 @@ export function BlogPostHeader() {
                     <Picture
                         image={titleImage}
                         alt={titleImageAttribution}
-                        imgClassName='max-h-96 object-contain'
+                        // The title images are either square or wide.
+                        // On small screens (viewport width < viewport height), the width is the constraint and the image looks nice by default (w-full).
+                        // On larger screens (viewport width > viewport height), we want to make sure
+                        // the image is not too tall, so we constrain the height.
+                        // w-auto is used to make sure the image doesn't get stretched.
+                        imgClassName='md:h-96 md:w-auto'
                     />
                 </PopoverTrigger>
                 <PopoverContent side='bottom' className="w-96 max-w-full">

components/picture.tsx

@@ -41,7 +41,10 @@ export default function Picture({
   )}")`;
 
   const placeholderStyle = {
-    backgroundSize: "contain",
+    // This is `cover` because the blur image can have a different aspect ratio
+    // E.g. an image with 1792 × 1024 px can have a blur image with 240 x 150 px
+    // This may be due to some implementation details in the next/image loader
+    backgroundSize: "cover",
     backgroundPosition: "50% 50%",
     backgroundRepeat: "no-repeat",
     backgroundImage,