add prps objectFit

gatsby-node.js

@@ -19,11 +19,11 @@ exports.createPages = async function ({ actions, graphql }) {
                 }
             }
             directus {
-                pages (limit: -1) {
+                pages(limit: -1) {
                     id
                     slug
                 }
-                news (limit: -1) {
+                news(limit: -1) {
                     id
                     slug
                     title

index.d.ts

@@ -256,6 +256,7 @@ interface Iimage {
     image?: string | IGatsbyImageData
     className?: string
     objectPosition?: string
+    objectFit?: any
 }
 export function Image(props: Iimage): JSX.Element
 

src/components/core/Image.tsx

@@ -10,10 +10,16 @@ export interface Iimage {
     image?: string | IGatsbyImageData
     className?: string
     objectPosition?: string
+    objectFit?: any
 }
 
 const Image = (props: Iimage) => {
-    const { image, className = "", objectPosition = "50% 50%" } = props
+    const {
+        image,
+        className = "",
+        objectPosition = "50% 50%",
+        objectFit = "cover",
+    } = props
 
     const imageClassname = ` ${className}`
 
@@ -31,6 +37,7 @@ const Image = (props: Iimage) => {
                 src="../../images/400x400.png"
                 alt="no-image-available"
                 className={imageClassname}
+                objectFit={objectFit}
             />
         )
     }
@@ -40,6 +47,7 @@ const Image = (props: Iimage) => {
                 src="../../images/800x400.png"
                 alt="no-image-available"
                 className={imageClassname}
+                objectFit={objectFit}
             />
         )
     }
@@ -49,6 +57,7 @@ const Image = (props: Iimage) => {
                 src="../../images/400x800.png"
                 alt="no-image-available"
                 className={imageClassname}
+                objectFit={objectFit}
             />
         )
     }
@@ -83,6 +92,7 @@ const Image = (props: Iimage) => {
             image={img}
             alt={image.name}
             className={imageClassname}
+            objectFit={objectFit}
             objectPosition={objectPosition}
         />
     )