Image now porperly scaled on any image aspect ratio

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;
 }

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>

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>