ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Fix centering when max height is set

This commit is contained in:
Lorenz Padberg 2024-05-03 14:39:24 +02:00
parent 2d6895931d
commit 9752867dd4
1 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/components/ui/WagtailImage.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<div class="wagtail-image">
<div class="wagtail-image">
<div <div
:class="['wagtail-image__background', { loaded: loaded }]" :class="['wagtail-image__background', { loaded: loaded }]"
:style="{height: backgroundHeight}" :style="{ height: backgroundHeight }"
ref="imgElement" ref="imgElement"
> >
<img <img
@ -18,9 +16,7 @@
@load="handleLoad" @load="handleLoad"
/> />
</div> </div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'; import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
@ -42,7 +38,7 @@ const width = ref(0);
const height = ref(0); const height = ref(0);
const loaded = ref(false); const loaded = ref(false);
const backgroundHeight = ref(); const backgroundHeight = ref();
const scaledHeight = ref() const scaledHeight = ref();
// //
const updateDimensions = () => { const updateDimensions = () => {
@ -61,26 +57,23 @@ const calculateBackgroundHeight = () => {
if (width.value) { if (width.value) {
const scalingFactor = width.value / props.originalWidth; const scalingFactor = width.value / props.originalWidth;
scaledHeight.value = Math.round(props.originalHeight * scalingFactor); scaledHeight.value = Math.round(props.originalHeight * scalingFactor);
console.log(width.value / scaledHeight.value);
if (height.value > 3 && height.value < scaledHeight.value && imgElement.value) { if (height.value > 3 && height.value < scaledHeight.value && imgElement.value) {
// if parents height is limited and smaller than the scaled height // 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`; backgroundHeight.value = `${clientHeight}px`;
console.log('calculateBackgrondHeight a', backgroundHeight.value); console.log('calculateBackgrondHeight a', backgroundHeight.value);
return return;
} }
if (width.value) { if (width.value) {
backgroundHeight.value = `${scaledHeight.value}px`; backgroundHeight.value = `${scaledHeight.value}px`;
console.log('calculateBackgrondHeight b ', backgroundHeight.value); console.log('calculateBackgrondHeight b ', backgroundHeight.value);
return; return;
} }
} }
backgroundHeight.value = '100%'; backgroundHeight.value = '100%';
console.log('calculateBackgrondHeight c', backgroundHeight.value); console.log('calculateBackgrondHeight c', backgroundHeight.value);
}; };
const handleLoad = () => { const handleLoad = () => {
@ -118,19 +111,16 @@ onBeforeUnmount(() => {
.wagtail-image { .wagtail-image {
overflow: hidden; overflow: hidden;
width: 100%;
&__background { &__background {
background-color: $color-silver-light; background-color: $color-silver-light;
border: 1px red solid;
} }
&__image { &__image {
width: 100%; 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;
} }
} }