From 1a5be0c2c6b71503bc779bb91f464543994619cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= <lorenzo.dellaca@mind-overflow.net>
Date: Wed, 17 Mar 2021 16:06:16 +0100
Subject: [PATCH] Make feature image have a max height when showed in a post

---
 assets/css/screen.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 4c9f61c..bb11ac8 100755
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -699,7 +699,9 @@ instead of pages ".mind-page*".
 }
 
 img.mind-post_feature-image {
+    max-height: 400px;
     width: 100%;
+    object-fit: cover;
     /*
     TODO: see .mind-post_content-header.
 
@@ -1211,6 +1213,10 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 17px;
     }
 
+    img.mind-post_feature-image {
+        max-height: 350px;
+    }
+
     .kg-gallery-image {
         margin: 10px 10px;
     }
@@ -1287,6 +1293,10 @@ Media queries are used to make the website responsive and cool on mobile.
         padding: 0 20px;
     }
 
+    img.mind-post_feature-image {
+        max-height: 500px;
+    }
+
     .kg-gallery-image {
         margin: 10px 5px;
     }
@@ -1329,6 +1339,10 @@ Media queries are used to make the website responsive and cool on mobile.
     .mind-tag-content_main {
         grid-template-columns: 1fr 1fr 1fr;
     }
+
+    img.mind-post_feature-image {
+        max-height: 350px;
+    }
 }
 
 @media only screen and (max-width: 650px) {
@@ -1385,6 +1399,10 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 15px;
     }
 
+    img.mind-post_feature-image {
+        max-height: 300px;
+    }
+
     .mind-post_info {
         font-size: 13px;
     }
@@ -1460,6 +1478,10 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 14px;
     }
 
+    img.mind-post_feature-image {
+        max-height: 250px;
+    }
+
     .mind-site-footer_main {
         font-size: 16px;
     }