diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro
index aa586b981..748803e83 100644
--- a/www/src/components/BlogPost.astro
+++ b/www/src/components/BlogPost.astro
@@ -11,7 +11,7 @@ export let heroImage: string;
   <article class="content">
   <div>
     <header>
-      {heroImage && <img width="720" height="360" class="hero-image" loading="lazy" src={heroImage} />}
+      {heroImage && <img width="720" height="480" class="hero-image" loading="lazy" src={heroImage} />}
       <p class="publish-date">{publishDate}</p>
       <h1 class="title">{title}</h1>
       <Author authorId={author} />
@@ -24,9 +24,12 @@ export let heroImage: string;
 
 <style>
 .hero-image {
-  width: 100%;
+  width: 100vw;
+  object-fit: cover;
+  object-position: center;
   margin-top: 2rem;
   margin-bottom: 4rem;
+  max-width: 1280px;
 }
 .content {
   margin-bottom: 8rem;