fix: render medium and large PostCard cover images in 16:9 aspect ratio, fixes #97

src/components/PostCard/PostCard.tsx

@@ -292,6 +292,24 @@ PostCard.styles = {
       ${PostCardShowDetails.styles.large(theme)}
     }
 
+    .post-card__cover-image {
+      & > div {
+        padding-top: calc(9 / 16 * 100%) !important;
+
+        & > div {
+          width: 100%;
+          height: 100%;
+        }
+
+        & > div > img {
+          width: 100% !important;
+          height: 100% !important;
+          object-fit: cover;
+          object-position: center center;
+        }
+      }
+    }
+
     ${lsdUtils.breakpoint(theme, 'md', 'down')} {
       .post-card__title-text {
         ${lsdUtils.typography('h3')}
@@ -326,6 +344,22 @@ PostCard.styles = {
 
     .post-card__cover-image {
       grid-area: image;
+
+      & > div {
+        padding-top: calc(9 / 16 * 100%) !important;
+
+        & > div {
+          width: 100%;
+          height: 100%;
+        }
+
+        & > div > img {
+          width: 100% !important;
+          height: 100% !important;
+          object-fit: cover;
+          object-position: center center;
+        }
+      }
     }
 
     .post-card__label {

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -50,8 +50,12 @@ export const ResponsiveImage = ({
         height: height || 'auto',
       }}
     >
+      <div>
         <img src={lazyUrl} alt={alt} />
+      </div>
+      <div className={imageProps.className}>
         <Image {...imageProps} alt={alt} />
+      </div>
     </Container>
   )
 }
@@ -67,24 +71,16 @@ const Container = styled.div`
     filter: grayscale(0%);
   }
 
-  &.fill {
+  img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-
-    > img {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 100%;
-      height: auto;
-    }
   }
 
   > * {
     position: absolute !important;
     width: 100%;
-    height: auto;
+    height: 100%;
     top: 0;
     left: 0;