From e21793ada45898d657fc4ca4ae6e81567179769a Mon Sep 17 00:00:00 2001
From: EisiBaer <manuel.eisinger@protonmail.com>
Date: Sun, 30 Jul 2023 21:15:20 +0200
Subject: [PATCH] Image now porperly scaled on any image aspect ratio

---
 src/webapp/assets/scss/styles.scss           | 4 ++++
 src/webapp/components/views/AnswerView.vue   | 7 ++-----
 src/webapp/components/views/QuestionView.vue | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/webapp/assets/scss/styles.scss b/src/webapp/assets/scss/styles.scss
index 4781971..cdbe75f 100644
--- a/src/webapp/assets/scss/styles.scss
+++ b/src/webapp/assets/scss/styles.scss
@@ -184,4 +184,8 @@ $utilities: map-merge(
 
 .buzzer-answering:active{
   background-color: shade-color( $green-active, 10% );
+}
+
+.image-contain{
+  object-fit: contain;
 }
\ No newline at end of file
diff --git a/src/webapp/components/views/AnswerView.vue b/src/webapp/components/views/AnswerView.vue
index a460c0f..975a6c0 100644
--- a/src/webapp/components/views/AnswerView.vue
+++ b/src/webapp/components/views/AnswerView.vue
@@ -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>
diff --git a/src/webapp/components/views/QuestionView.vue b/src/webapp/components/views/QuestionView.vue
index 45493dd..1df7cad 100644
--- a/src/webapp/components/views/QuestionView.vue
+++ b/src/webapp/components/views/QuestionView.vue
@@ -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>