Fix PR comment: Add css to style for the size of image

Bug: CMS-47074

Author: GiangNT95

samples/nextjs-template/src/app/globals.css

@@ -411,6 +411,16 @@ a:hover span.animate {
   background-image: linear-gradient(180deg, #10141d 55.03%, #191e28 100%);
 }
 
+.about-us .about-us-image {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.about-us .about-us-image img {
+  object-fit: cover;
+}
+
 .blog-card {
   color: #333;
   cursor: pointer;

samples/nextjs-template/src/components/AboutUs.tsx

@@ -38,7 +38,7 @@ export default function AboutUs({ opti }: AboutUsProps) {
     <section className="about-us">
       {opti?.image?.url?.default && (
         <div className="about-us-image">
-          <Image src={src(opti.image.url.default)} alt="" width={500} height={500}/>
+          <Image src={src(opti.image.url.default)} alt="" fill={true}/>
         </div>
       )}
       <h2>{opti.heading}</h2>