Comment adapter les images dans les appels API ?

Question

C'est la première fois que je publie quoi que ce soit ici, donc s'il me manque quelque chose, faites-le-moi savoir ! Ok, donc mon problème est que les images de la page de catégorie ne s'emboîtent pas et ne s'alignent plus. Cela s'est produit après avoir appris un peu de JavaScript et obtenu des images à partir d'appels API. Maintenant, ils n'ont plus l'air aussi beaux... surtout en vue mobile. Comment puis-je les faire de la même taille ? BTW, je suis un vrai noob. Voici le lien vers ma page : https://lovely-croissant-3cceca.netlify.app/

J'ai essayé de le réparer avec CSS, mais il ne "réagit" plus lorsque je change quelque chose. Vue mobile dans la page de catégorie, image trop grande. Cependant, lorsque j'essaie de les réduire dans la requête multimédia, la version de bureau change également. Je sais que c'est probablement quelque chose que je fais lorsque j'expérimente avec javascript. Je ne peux pas non plus changer le nom "test" en autre chose car tout sera perturbé...

Answer 1

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