From b4f1c0297199507223e2c9486f62a4f330b63820 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@skypack.dev>
Date: Tue, 8 Jun 2021 14:28:38 -0500
Subject: [PATCH] fix: hero image width

---
 www/src/components/BlogPost.astro | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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;