From 4b6ccbcbccce27b9fcb035812efefe4eb69301cf Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 15 Dec 2022 03:18:27 +0800
Subject: [PATCH] feat: set preview image ratio to 1.91 : 1

---
 _layouts/post.html     | 18 +-----------------
 _sass/layout/post.scss |  6 ++++++
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index a55031e..367def5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -31,22 +31,6 @@ tail_includes:
     {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
     {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
 
-    {% capture w %}
-      {% if page.image.width %}
-        width="{{ page.image.width }}"
-      {% elsif page.image.w %}
-        width="{{ page.image.w }}"
-      {% endif %}
-    {% endcapture %}
-
-    {% capture h %}
-      {% if page.image.height %}
-        height="{{ page.image.height }}"
-      {% elsif page.image.h %}
-        h="{{ page.image.h }}"
-      {% endif %}
-    {% endcapture %}
-
     {% capture lqip %}
       {% if page.image.lqip %}
         lqip="{{ page.image.lqip }}"
@@ -54,7 +38,7 @@ tail_includes:
     {% endcapture %}
 
     <div class="mt-3 mb-3">
-      <img {{ src }} {{ class }} {{ w | strip }} {{ h | strip }} {{ lqip | strip }} {{ alt }}>
+      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
       {%- if page.image.alt -%}
         <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
       {%- endif -%}
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 146caba..ed7dcd8 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -34,6 +34,8 @@
   @include align-center;
   @extend %preview-margin;
 
+  max-width: 100%;
+
   &:not(.no-bg) {
     img.lazyloaded {
       background: var(--img-bg);
@@ -41,6 +43,10 @@
   }
 
   img {
+    aspect-ratio: 40 / 21;
+    -o-object-fit: cover;
+    object-fit: cover;
+
     @extend %preview-margin;
     @extend %img-rounded;
   }