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="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>

View File

@ -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>

View File

@ -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>

View File

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