Img border fix (#35)

* Fix for images in the Page layouts don't have clear borders on all 4 sides * Remove width hard coding
kuzudb · Mar 27, 2024 · 15d6e4f · 15d6e4f
1 parent c494a71
commit 15d6e4f
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -29,20 +29,18 @@ type PostType = {
   {
     posts?.slice(0, config.site.pageSize).map((post: PostType) => (
       <article class="flex w-full flex-col items-start">
-        <div class="rounded overflow-hidden isolate mb-4">
+        <div class="rounded overflow-hidden isolate mb-4" style="width: 100%;">
           {post.data.heroImage && (
             <a href={`/post/${post.slug}/`}>
             <center>
-                <figure class="max-w-96 h-40 block bg-white border-2 border-zinc-200">
-                <Image
+                <img
+                    class="max-w-96 h-36 block bg-white border-2 border-zinc-200"
                     src={post.data.heroImage}
                     alt={post.data.title}
-                    width={960}
-                    height={480}
                     decoding="async"
                     loading="lazy"
+                    style="width: 100%; height:200px; object-fit: cover;"
                 />
-                </figure>
             </center>
             </a>
           )}