fix card image display error

tasl-lab · Oct 5, 2024 · 3fc7a0c · 3fc7a0c
1 parent 51d1f9c
commit 3fc7a0c
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/_includes/card_research.html b/_includes/card_research.html
@@ -20,7 +20,7 @@
       <span class="card-subtitle">{{ include.subtitle }}</span>
     {% endif %}
   </div>
-  <div class="card-img" style="position: relative; width: 100%; padding-bottom: 20%; overflow: hidden; margin-bottom: 0px;">
+  <div class="card-img" style="position: relative; width: 100%; aspect-ratio: 5 / 1; overflow: hidden; margin-bottom: 0px;">
     <a
       {% if include.link %}
         href="{{ include.link | relative_url }}"
@@ -31,7 +31,7 @@
       <img
         src="{{ include.image | relative_url }}"
         alt="{{ include.title | default: 'card image' }}"
-        style="position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); object-fit: cover;"
+        style="width: 100%; height: 100%; object-fit: contain;"
         {% include fallback.html %}
       >
     </a>