Update image cropping logic

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml

@@ -56,7 +56,7 @@
     <div class="row">
         <div @Html.Raw(isScrollIndexEnabled ? "class=\"col-md-10 col-sm-12\"" : "class=\"col-md-12\"")>
             <abp-card class="mb-4">
-                <img src="/api/cms-kit/media/@Model.ViewModel.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
+            <img src="/api/cms-kit/media/@Model.ViewModel.CoverImageMediaId" class="card-img-ratio" onerror="this.src='@dummyImageSource'" />
                 <input hidden id="BlogId" value="@Model.ViewModel.Id" />
                 <abp-card-body>
                     <abp-row>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css

@@ -22,6 +22,11 @@ span.area-title {
     min-width: 276px;
 }
 
+.card-img-ratio {
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+}
+
 #scroll-index {
     position: sticky;
     top: 20px;

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css

@@ -1,5 +1,6 @@
-.card-img-top { 
+.card-img-top {
     aspect-ratio: 16 / 9;
+    object-fit: cover;
 }
 
 .popover {