Bagaimana untuk menyesuaikan imej dalam panggilan api?

Question

Ini adalah kali pertama saya menyiarkan apa-apa di sini, jadi jika saya terlepas sesuatu, sila beritahu saya! Ok, jadi masalah saya ialah imej dalam halaman kategori tidak sesuai antara satu sama lain dan tidak lagi berbaris. Ini berlaku selepas saya mempelajari sedikit JavaScript dan mendapat imej daripada panggilan API. Kini mereka tidak kelihatan begitu baik lagi...terutamanya dalam paparan mudah alih. Bagaimanakah saya boleh membuat saiz yang sama? BTW, saya benar-benar noob. Berikut ialah pautan ke halaman saya: https://lovely-croissant-3cceca.netlify.app/

Saya cuba membetulkannya dengan CSS, tetapi ia tidak lagi "bertindak balas" apabila saya menukar sesuatu. Paparan mudah alih dalam halaman kategori, imej terlalu tinggi. Walau bagaimanapun, apabila saya cuba menurunkannya dalam pertanyaan media, versi desktop juga berubah. Saya tahu ini mungkin sesuatu yang saya lakukan semasa saya bereksperimen dengan javascript. Saya juga tidak boleh menukar nama "ujian" kepada yang lain kerana semuanya akan terganggu...

Answer 1

Yang penting ialah output, daripada memanggil imej melalui API, kita boleh menggunakan CSS untuk mengendalikan hasilnya.

Tajuk filem menolak imej ke bawah kerana ia berada dalam bekas yang sama jadi kami perlu memberikannya ketinggian.

Imej adalah dalam perkadaran yang berbeza, jadi anda boleh menggunakan object-fit: cover untuk memangkas imej pada saiz maksimum dengan ketinggian imej minimum.

Pada peranti mudah alih: Anda perlu menambah overflow设置为visible，并从.container-中取出padding child juga (jika tidak akan terdapat berbilang ruang tambahan), dan hanya kepada ibu bapa.

Perkara seperti ini akan dilakukan:

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