css: fix image sizing inside grid items

2 files changed, 7 insertions, 2 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 45379629..24c91d0f 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -157,7 +157,7 @@ export default {
       let wrapped = content;
 
       wrapped =
-        html.tag('div', {class: 'image-container'},
+        html.tag('div', {class: ['image-container', !originalSrc && 'placeholder-image']},
           html.tag('div', {class: 'image-inner-area'},
             wrapped));
 
diff --git a/src/static/site4.css b/src/static/site4.css
index b4e23cf2..b92d088c 100644
--- a/src/static/site4.css
+++ b/src/static/site4.css
@@ -553,6 +553,11 @@ a.box img {
   height: auto;
 }
 
+a.box .image-container.placeholder-image {
+  width: 100%;
+  height: 100%;
+}
+
 h1 {
   font-size: 1.5em;
 }
@@ -871,7 +876,7 @@ img {
 
 .grid-item img {
   width: 100%;
-  height: 100%;
+  height: 100% !important;
   margin-top: auto;
   margin-bottom: auto;
 }