Use picture element

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css

@@ -0,0 +1,8 @@
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+}

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor

@@ -5,12 +5,11 @@
 <article>
   <div class="blog-card @AltCssClass">
     <div class="meta">
-      <div>
+      <div class="photo">
         <PreviewImage PreviewImageUrl="@BlogPost.PreviewImageUrl" 
                       PreviewImageUrlFallback="@BlogPost.PreviewImageUrlFallback"
                       LazyLoadImage="@LazyLoadPreviewImage"></PreviewImage>
       </div>
-      @* <div class="photo" style="background-image: url(@BlogPost.PreviewImageUrl)"></div> *@
       <ul class="details">
         <li class="date">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</li>
         @if (BlogPost.Tags != null)

src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css

@@ -23,24 +23,11 @@
 .blog-card a:hover {
     color: #5ad67d;
 }
-.blog-card:hover .photo {
-    transform: scale(1.3) rotate(3deg);
-}
 .blog-card .meta {
     position: relative;
     z-index: 0;
     height: 200px;
 }
-.blog-card .photo {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-size: cover;
-    background-position: center;
-    transition: transform 0.5s;
-}
 .blog-card .details,
 .blog-card .details ul {
     margin: auto;