From 9752867dd4d61866d7757aa7a52cc8fe59d27295 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 3 May 2024 14:39:24 +0200
Subject: [PATCH] Fix centering when max height is set

---
 client/src/components/ui/WagtailImage.vue | 34 ++++++++---------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index 75686ca2..507be47f 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -1,10 +1,8 @@
 <template>
-
-<div class="wagtail-image">
-
+  <div class="wagtail-image">
     <div
       :class="['wagtail-image__background', { loaded: loaded }]"
-      :style="{height: backgroundHeight}"
+      :style="{ height: backgroundHeight }"
       ref="imgElement"
     >
       <img
@@ -18,9 +16,7 @@
         @load="handleLoad"
       />
     </div>
-
-</div>
-
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
@@ -42,7 +38,7 @@ const width = ref(0);
 const height = ref(0);
 const loaded = ref(false);
 const backgroundHeight = ref();
-const scaledHeight = ref()
+const scaledHeight = ref();
 
 //
 const updateDimensions = () => {
@@ -61,26 +57,23 @@ const calculateBackgroundHeight = () => {
   if (width.value) {
     const scalingFactor = width.value / props.originalWidth;
     scaledHeight.value = Math.round(props.originalHeight * scalingFactor);
-    console.log(width.value / scaledHeight.value);
 
     if (height.value > 3 && height.value < scaledHeight.value && imgElement.value) {
       // if parents height is limited and smaller than the scaled height
-      const { clientWidth, clientHeight } = imgElement.value.parentElement;
+      const { clientHeight } = imgElement.value.parentElement;
       backgroundHeight.value = `${clientHeight}px`;
       console.log('calculateBackgrondHeight a', backgroundHeight.value);
-      return
+      return;
     }
 
     if (width.value) {
       backgroundHeight.value = `${scaledHeight.value}px`;
-            console.log('calculateBackgrondHeight b ', backgroundHeight.value);
-            return;
-
+      console.log('calculateBackgrondHeight b ', backgroundHeight.value);
+      return;
     }
   }
   backgroundHeight.value = '100%';
-        console.log('calculateBackgrondHeight c', backgroundHeight.value);
-
+  console.log('calculateBackgrondHeight c', backgroundHeight.value);
 };
 
 const handleLoad = () => {
@@ -118,19 +111,16 @@ onBeforeUnmount(() => {
 
 .wagtail-image {
   overflow: hidden;
-  width: 100%;
-
-
 
   &__background {
     background-color: $color-silver-light;
-    border: 1px red solid;
-
   }
 
   &__image {
     width: 100%;
-    border: 1px green solid;
+    max-height: 100%;
+    object-fit: cover; // Ensures the image covers the allocated area without distorting aspect ratio
+    object-position: center;
   }
 }