From a9f655930ed5bd35aaef14634702c0c84d04b87a Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Tue, 19 Aug 2025 20:03:55 +0530
Subject: [PATCH] img issue corrected

---
 components/our-mission/index.js |  6 +++---
 pages/blog/[slug].js            | 16 +++++++---------
 pages/services/[slug].js        | 16 +++++++---------
 styles/sass/layout/_header.scss | 28 +++++++++++++++++++++++++++-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/components/our-mission/index.js b/components/our-mission/index.js
index 614d5c9..772d1a2 100644
--- a/components/our-mission/index.js
+++ b/components/our-mission/index.js
@@ -12,12 +12,12 @@ const OurMission = () => {
                         <div className="wpo-blog-content">
                             <div className="post format-standard-image">
                                 <div
-                                    className="entry-media"
-                                    style={{ width: "100%", height: "auto", overflow: "hidden" }}
-                                >
+                                    className="responsive-entry-media"                                >
                                     <img
                                         src="/images/our-mission/imgg.webp"
                                         alt=""
+                                        fill
+                                        style={{ objectFit: 'cover' }}
                                     />
                                 </div>
 
diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
index be7a088..b76a1f0 100644
--- a/pages/blog/[slug].js
+++ b/pages/blog/[slug].js
@@ -47,16 +47,14 @@ const BlogSingle = () => {
                         <div className="col col-lg-12 col-12">
                             <div className="wpo-blog-content">
                                 <div className={`post ${blogMeta.blClass}`}>
-                                    <div className="entry-media">
-                                        <div style={{ width: '100%', height: '400px', position: 'relative' }}>
-                                            <Image
-                                                src={blogMeta.blogSingleImg}
-                                                alt={blogContent.title}
-                                                fill
-                                            />
-                                        </div>
+                                    <div className="responsive-entry-media">
+                                        <Image
+                                            src={blogMeta.blogSingleImg}
+                                            alt={blogContent.title}
+                                            fill
+                                            style={{ objectFit: 'cover' }}
+                                        />
                                     </div>
-
                                     {/* <div className="entry-meta">
                                         <ul>
                                             <li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>
diff --git a/pages/services/[slug].js b/pages/services/[slug].js
index a71f72a..b6ab3a0 100644
--- a/pages/services/[slug].js
+++ b/pages/services/[slug].js
@@ -42,15 +42,13 @@ const ServiceDetailsPage = ({ service }) => {
               <div className="wpo-blog-content">
                 <div className="post format-standard-image">
                   {/* Banner Image */}
-                  <div className="entry-media">
-                    <div style={{ width: "100%", height: "650px", position: "relative" }}>
-                      <Image
-                        src={service.sImgS}
-                        alt={service.sTitle}
-                        fill
-                        unoptimized
-                      />
-                    </div>
+                  <div className="responsive-entry-media2">
+                    <Image
+                      src={service.sImgS}
+                      alt={service.sTitle}
+                      fill
+                      style={{ objectFit: 'cover' }}
+                    />
                   </div>
 
                   <h2 className="mt-4">{service.sTitle}</h2>
diff --git a/styles/sass/layout/_header.scss b/styles/sass/layout/_header.scss
index 18425d4..fae23af 100644
--- a/styles/sass/layout/_header.scss
+++ b/styles/sass/layout/_header.scss
@@ -2024,4 +2024,30 @@
 .responsivemenu a:not([href]):not([class]),
 .responsivemenu a:not([href]):not([class]):hover {
 	color: #ddd;
-}
\ No newline at end of file
+}
+.responsive-entry-media {
+    position: relative;
+    width: 100%;
+    aspect-ratio:28 / 9; 
+    overflow: hidden;
+}
+
+.responsive-entry-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.responsive-entry-media2 {
+    position: relative;
+    width: 100%;
+    aspect-ratio:3 / 2; 
+    overflow: hidden;
+}
+
+.responsive-entry-media2 img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+