fix: Hauteur des images et l'aspect de la page d'accueil

src/components/Question.vue

@@ -59,7 +59,6 @@ function slideMove(splide, newIndex) {
             @click="$emit('answerSelected', question, answerWeight)"
           >
             <img
-              width="200"
               height="200"
               :src="`/answers/${answer.image}.png`"
             />

src/components/ScoresList.vue

@@ -25,7 +25,7 @@ function getTranslation(translations, key) {
     <h1>Ceiba Scores App</h1>
   </header>
   <main>
-    <template v-if="scores">
+    <div class="container" v-if="scores">
       <ul>
         <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
           <router-link :to="{ name: 'score', params: { id: score.id } }">{{
@@ -33,7 +33,7 @@ function getTranslation(translations, key) {
           }}</router-link>
         </li>
       </ul>
-    </template>
+    </div>
   </main>
 </template>
 
@@ -60,30 +60,37 @@ main
   overflow: hidden
   background-color: var(--color-highlight)
 
+.container
+  position: relative
+  width: 100%
+  max-width: 440px
+  max-height: 100%
+  padding-top: calc(100% / (724 / 1136))
+
+  @media only screen and (min-width: 472px)
+    padding-top: 0
+    width: 440px
+    height: calc(440px * 1136 / 724)
+
 ul
   margin: 0
   padding: 0
   list-style: none
 
-  width: 100%
+  position: absolute
-  max-width: 100%
+  top: 0
-  max-height: 100%
+  left: 0
+  bottom: 0
+  right: 0
 
-  aspect-ratio: 181 / 284
   background-image: url(/arbre.png)
-  background-size: 724px 1136px
-
   background-position: center
   background-repeat: no-repeat
   background-size: contain
 
-  position: relative
   // border: 2px solid var(--color-white)
   border-radius: 10px
 
-  @media only screen and (min-width: 472px)
-    max-width: 440px
-
   li
     display: none