replace width and height with fill property

glef1x-dev · Jul 18, 2023 · c23fdc5 · c23fdc5 · vercel · Jul 18, 2023
1 parent 5f473cb
commit c23fdc5
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 8 deletions.
diff --git a/app/components/Blog/Latest.component.tsx b/app/components/Blog/Latest.component.tsx
@@ -29,9 +29,7 @@ export function Latest({ blogPost }: LatestProps): JSX.Element {
             className="absolute top-0 left-0 w-full h-full rounded-lg rounded-b-none lg:(rounded-l-lg rounded-r-none) object-cover select-none"
             draggable={false}
             src={blogPost.image}
-            // TODO width is selected arbitrary and incurs overhead costs
-            width={1700}
-            height={600}
+            fill
             priority
           />
         </div>

diff --git a/app/components/Blog/Post.component.tsx b/app/components/Blog/Post.component.tsx
@@ -30,9 +30,7 @@ export function _Post({ blogPost, index }: PostProps): JSX.Element {
           className="absolute top-0 left-0 w-full h-48 object-cover select-none"
           draggable={false}
           src={blogPost.image}
-          // TODO width is selected arbitrary and incurs overhead costs
-          width={1700}
-          height={600}
+          fill
           priority
         />
       </div>

diff --git a/app/pages/blog/[slug].tsx b/app/pages/blog/[slug].tsx
@@ -60,8 +60,7 @@ export default function BlogPost({ post }: BlogPostProps): JSX.Element {
             className="absolute hidden lg:inline top-0 left-0 w-full h-auto max-h-64 lg:max-h-96 mb-8 rounded-3xl object-cover select-none shadow-xl default-transition"
             draggable={false}
             src={post.image}
-            width={1700}
-            height={900}
+            fill
           />
         </div>