Fixed responsiveness

client/src/components/modules/ModuleTeaser.vue

@@ -106,10 +106,7 @@ const moduleLink = computed(() => {
     width: 100%;
     max-height: 150px;
     height: 150px;
-    background-position: center;
+    //prevent image from shrinking
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-    // prevent image from shrinking
     flex-shrink: 0;
   }
 

client/src/components/ui/WagtailImage.vue

@@ -1,20 +1,26 @@
 <template>
-  <div
+
-    :class="['wagtail-image', { loaded: loaded }]"
+<div class="wagtail-image">
-    :style="backgroundStyle"
+
-  >
+    <div
-    <img
+      :class="['wagtail-image__background', { loaded: loaded }]"
-      :src="props.src"
+      :style="{height: backgroundHeight}"
-      :srcset="props.srcset"
-      :alt="props.alt"
-      class="wagtail-image__image"
-      :sizes="computedSizes"
-      loading="eager"
-      v-show="loaded"
       ref="imgElement"
-      @load="handleLoad"
+    >
-    />
+      <img
-  </div>
+        :src="props.src"
+        :srcset="props.srcset"
+        :alt="props.alt"
+        class="wagtail-image__image"
+        :sizes="computedSizes"
+        loading="eager"
+        v-show="loaded"
+        @load="handleLoad"
+      />
+    </div>
+
+</div>
+
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
@@ -35,13 +41,46 @@ const imgElement = ref(null);
 const width = ref(0);
 const height = ref(0);
 const loaded = ref(false);
+const backgroundHeight = ref();
+const scaledHeight = ref()
 
+//
 const updateDimensions = () => {
   if (imgElement.value && imgElement.value.parentElement) {
     const { clientWidth, clientHeight } = imgElement.value.parentElement;
     width.value = clientWidth;
     height.value = clientHeight;
   }
+  calculateBackgroundHeight();
+  console.log('sizes ', width.value, height.value);
+};
+
+const calculateBackgroundHeight = () => {
+  // calculate the hight of the background so, that you see a gray box of correct height before image is loaded
+  console.log('calculateBackgrondHeight');
+  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;
+      backgroundHeight.value = `${clientHeight}px`;
+      console.log('calculateBackgrondHeight a', backgroundHeight.value);
+      return
+    }
+
+    if (width.value) {
+      backgroundHeight.value = `${scaledHeight.value}px`;
+            console.log('calculateBackgrondHeight b ', backgroundHeight.value);
+            return;
+
+    }
+  }
+  backgroundHeight.value = '100%';
+        console.log('calculateBackgrondHeight c', backgroundHeight.value);
+
 };
 
 const handleLoad = () => {
@@ -64,26 +103,6 @@ const computedSizes = computed(() => {
   return size;
 });
 
-const backgroundStyle = computed(() => {
-  const styles = {
-    width: '100%',
-    height: '100%',
-  };
-  if (width.value) {
-    const scalingFactor = width.value / props.originalWidth;
-    const scaledHeight = Math.round(props.originalHeight * scalingFactor);
-    const scaledWidth = Math.round(props.originalWidth * scalingFactor);
-
-    if (props.originalWidth) {
-      styles.width = `${scaledWidth}px`;
-    }
-    if (props.originalHeight) {
-      styles.height = `${scaledHeight}px`;
-    }
-  }
-  return styles;
-});
-
 onMounted(() => {
   updateDimensions();
   window.addEventListener('resize', updateDimensions);
@@ -100,18 +119,22 @@ onBeforeUnmount(() => {
 .wagtail-image {
   overflow: hidden;
   width: 100%;
-  height: 100%;
+
-  background-color: $color-silver-light;
+
+
+  &__background {
+    background-color: $color-silver-light;
+    border: 1px red solid;
+
+  }
 
   &__image {
     width: 100%;
-    height: 100%;
+    border: 1px green solid;
-    object-fit: cover;
-    object-position: center;
   }
 }
 
-.wagtail-image.loaded {
+.wagtail-image__background.loaded {
-  background-color: white;
+  background-color: transparent;
 }
 </style>