img issue corrected

This commit is contained in:
Selvi 2025-08-19 20:03:55 +05:30
parent 88fd584273
commit a9f655930e
4 changed files with 44 additions and 22 deletions

View File

@ -12,12 +12,12 @@ const OurMission = () => {
<div className="wpo-blog-content"> <div className="wpo-blog-content">
<div className="post format-standard-image"> <div className="post format-standard-image">
<div <div
className="entry-media" className="responsive-entry-media" >
style={{ width: "100%", height: "auto", overflow: "hidden" }}
>
<img <img
src="/images/our-mission/imgg.webp" src="/images/our-mission/imgg.webp"
alt="" alt=""
fill
style={{ objectFit: 'cover' }}
/> />
</div> </div>

View File

@ -47,16 +47,14 @@ const BlogSingle = () => {
<div className="col col-lg-12 col-12"> <div className="col col-lg-12 col-12">
<div className="wpo-blog-content"> <div className="wpo-blog-content">
<div className={`post ${blogMeta.blClass}`}> <div className={`post ${blogMeta.blClass}`}>
<div className="entry-media"> <div className="responsive-entry-media">
<div style={{ width: '100%', height: '400px', position: 'relative' }}> <Image
<Image src={blogMeta.blogSingleImg}
src={blogMeta.blogSingleImg} alt={blogContent.title}
alt={blogContent.title} fill
fill style={{ objectFit: 'cover' }}
/> />
</div>
</div> </div>
{/* <div className="entry-meta"> {/* <div className="entry-meta">
<ul> <ul>
<li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li> <li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>

View File

@ -42,15 +42,13 @@ const ServiceDetailsPage = ({ service }) => {
<div className="wpo-blog-content"> <div className="wpo-blog-content">
<div className="post format-standard-image"> <div className="post format-standard-image">
{/* Banner Image */} {/* Banner Image */}
<div className="entry-media"> <div className="responsive-entry-media2">
<div style={{ width: "100%", height: "650px", position: "relative" }}> <Image
<Image src={service.sImgS}
src={service.sImgS} alt={service.sTitle}
alt={service.sTitle} fill
fill style={{ objectFit: 'cover' }}
unoptimized />
/>
</div>
</div> </div>
<h2 className="mt-4">{service.sTitle}</h2> <h2 className="mt-4">{service.sTitle}</h2>

View File

@ -2025,3 +2025,29 @@
.responsivemenu a:not([href]):not([class]):hover { .responsivemenu a:not([href]):not([class]):hover {
color: #ddd; color: #ddd;
} }
.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;
}