Merge pull request #6579 from ShirshenduR/Fix#6578

[Individual-Integrations] Fix logo scaling and make the integrations page responsive

Author: Vivek Vishal

src/components/image.js

@@ -5,14 +5,13 @@ const Image = ({ childImageSharp, extension, publicURL, alt, imgStyle, ...rest }
 
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto", aspectRatio: "16/9" }}>
+      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto" }}>
         <img
           src={publicURL}
           alt={alt || "Blog image"}
           width="100%"
           height="auto"
           style={{
-            aspectRatio: "16/9",
             objectFit: imgStyle?.objectFit || "cover",
             ...imgStyle
           }}

src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js

@@ -63,7 +63,7 @@ const IndividualIntegrations = ({ data }) => {
   return (
     <IntegrationPageWrapper>
       <section className="herosection">
-        <Image {...frontmatter.integrationIcon} alt={frontmatter.title} />
+        <Image {...frontmatter.integrationIcon} alt={frontmatter.title} imgStyle={{ objectFit: "contain" }} />
         <h2>
           {frontmatter.title} with <span className="hero-header">Meshery</span>
         </h2>