L'important est le résultat, au lieu d'appeler l'image via API, nous pouvons utiliser CSS pour gérer le résultat.

Le titre du film pousse les images vers le bas car elles sont dans le même conteneur donc il faut leur donner de la hauteur.

Les images sont dans des proportions différentes, vous pouvez donc utiliser object-fit: cover pour recadrer l'image à la taille maximale avec une hauteur d'image minimale.

Sur les appareils mobiles : vous devez également ajouter overflow设置为visible，并从.container-中取出padding child (sinon il y aura plusieurs espaces supplémentaires), et uniquement au parent.

Des choses comme celle-ci feront l'affaire :

.container-child p {
       height: 50px;
       text-align: center;
       display: block;
   }
    /*from here the responsive code*/
    @media (max-width:1624px){
        .container-child img {
          object-fit: cover;
          max-width: 500px;
          max-height: 709px; /*the smallest image*/
          width: 100%;
          height: 100%;
        }
    }
    @media (max-width: 768px) {
    .container-child {
        padding-top: 0em; 
        display: inline-block;
        text-align: center;
       }
       #test {
        margin-top: 130px;
        display: inline-block;
        text-align: center
       }
       html, body {
        overflow: visible;
        background: #000;
       }
    }