jeobeardy
/
Jeobeardy
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Image now porperly scaled on any image aspect ratio

This commit is contained in:
EisiBaer 2023-07-30 21:15:20 +02:00
parent be8aab0986
commit e21793ada4
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/webapp/assets/scss/styles.scss
View File

@ -185,3 +185,7 @@ $utilities: map-merge(
.buzzer-answering:active{
background-color: shade-color( $green-active, 10% );
}
.image-contain{
object-fit: contain;
}

7
src/webapp/components/views/AnswerView.vue
View File

@ -54,12 +54,12 @@ watch(
<div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-0 h-100 w-100 bg-dark-primary">
<template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
<div class="h-75 w-100 text-center">
<img class="h-100" :src="getImageInGameCreationStore.url" />
<img class="image-contain h-100 w-100" :src="getImageInGameCreationStore.url" loading="eager" />
</div>
</template>
<template v-else-if="answer.filename">
<div class="h-75 w-100 text-center">
<img ref="imageRef" class="h-100" src="" />
<img ref="imageRef" class="image-contain h-100 w-100" src="" loading="eager" />
</div>
</template>
<div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle mt-5">
@ -77,6 +77,3 @@ watch(
</div>
</template>
</template>
<style scoped>
</style>

4
src/webapp/components/views/QuestionView.vue
View File

@ -76,12 +76,12 @@ watch(
<template v-if="question.questionType === 'imageQuestion'">
<template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
<div class="h-75 w-100 text-center">
<img class="h-100" :src="getImageInGameCreationStore.url" />
<img class="image-contain h-100 w-100" :src="getImageInGameCreationStore.url" loading="eager" />
</div>
</template>
<template v-else-if="question.filename">
<div class="h-75 w-100 text-center">
<img ref="imageRef" class="h-100" src="" />
<img ref="imageRef" class="image-contain h-100 w-100" src="" loading="eager" />
</div>
</template>
</template>