diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 365d8be..6b3b229 100644
--- a/components/blog-post.tsx
+++ b/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">
diff --git a/components/picture.tsx b/components/picture.tsx
index 4510822..8691b4d 100644
--- a/components/picture.tsx
+++ b/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,