Concise Code

Signed-off-by: krishnaShuk <shuklakrishna.kris@gmail.com>

Author: KrishnaShuk

content-learn/mastering-meshery/introduction-to-meshery/meshery/interpreting-meshery-designs.mdx

@@ -55,7 +55,7 @@ These components encapsulate the resources and include their detailed configurat
 <h2 class="chapter-sub-heading">Meshery Design at a Glance</h2>
 
 <a href={basicDesign}>
-  <img class="image-design-2" src={basicDesign} width="100%" align="center" />
+  <img src={basicDesign} width="100%" align="center" />
 </a>
 
 
@@ -203,7 +203,7 @@ These are used to denote annotations or static connections between components. T
 **Creating Edge-Network Relationships Between Kubernetes Components**
 
 <a href={EdgeNetworkGif}>
-  <img class="image-design" src={EdgeNetworkGif} width="100%" align="center" />
+  <img src={EdgeNetworkGif} width="100%" align="center" />
 </a>
 
 
@@ -221,7 +221,7 @@ The intermediary component (such as a RoleBinding) connects the two, defining ho
 **Creating Edge-Permission Relationships Between Components**
 
 <a href={edgePermissionGif}>
-  <img class="image-design" src={edgePermissionGif} width="100%" align="center" 
+  <img src={edgePermissionGif} width="100%" align="center" 
   />
 </a>
 
@@ -277,7 +277,7 @@ Annotations can be created using Meshery's Diagramming tools found in the dock a
 1. **Images**:  Images can be added to the design to represent components, logos, or any visual aid that supports understanding the architecture.
 
 <a href={AnnotationExampleGif}>
-  <img class="image-design" src={AnnotationExampleGif} width="100%" align="center" 
+  <img src={AnnotationExampleGif} width="100%" align="center" 
   />
 </a>
 
@@ -299,15 +299,15 @@ While default shapes, colors, and icons are provided for components and annotati
 **Customizing Kubernetes Components**
 
 <a href={CustomizeKubernetesGif}>
-  <img class="image-design" src={CustomizeKubernetesGif} width="100%" align="center" 
+  <img src={CustomizeKubernetesGif} width="100%" align="center" 
   />
 </a>
 
 
 **Creating and Customizing Arrow Annotations**
 
 <a href={CreateAnnotationGif}>
-  <img class="image-design" src={CreateAnnotationGif} width="100%" align="center" 
+  <img src={CreateAnnotationGif} width="100%" align="center" 
   />
 </a>
 

root-wrapper.js

@@ -9,14 +9,14 @@ import { ContextWrapper } from "./context-wrapper";
 // Custom image component for better CLS scores
 const OptimizedImage = props => {
   return (
-    <div style={{ width: "100%", height: "auto", aspectRatio: props.aspectRatio || "16/9", overflow: "hidden" }}>
+    <div style={{ width: "100%", height: "auto" }}>
       <img
         {...props}
         width={props.width || "100%"}
         height={props.height || "auto"}
         style={{
-          objectFit: props.objectFit || "cover",
-          aspectRatio: props.aspectRatio || "16/9",
+          objectFit: props.objectFit || "contain",
+          margin: "20px 0px",
           ...props.style
         }}
         loading="lazy"

src/components/Learn-Components/Chapters-Style/chapters.style.js

@@ -18,33 +18,13 @@ export const ChapterStyle = styled.div`
   }
   }
 
-  div[style*="width:100%"][style*="overflow"] {
-    aspect-ratio: unset !important;
-    overflow: unset !important;
-    margin: 20px 0px 20px 0px !important;
-  }
-
   .image-design-icons {
     object-fit: contain !important; 
 
     @media (max-width: 768px) {
-      width: clamp(200px, 60vw, 400px) !important;
+      width: clamp(150px, 70vw, 400px) !important;
       height: auto !important;
       max-width: none !important;
     }
-    
-    @media (max-width: 480px) {
-      width: clamp(150px, 70vw, 350px) !important;
-    }
-
-  }
-  
-  .image-design {
-    object-fit: contain !important;
   }
-
-  .image-design-2 {
-    aspect-ratio: unset !important;
-    object-fit: contain !important;
-  } 
 `;