如何適應 api 呼叫中的圖像？

Question

我第一次在這裡發布任何內容，如果我遺漏了什麼，請告訴我！好的，所以我的問題是類別頁面中的圖像彼此不適合併且不再對齊。這是在我學習了一點 JavaScript 並從 API 呼叫中獲取圖像之後發生的。現在它們看起來不再那麼好......尤其是在移動視圖中。我怎樣才能使它們的尺寸相同？順便說一句，我完全是個菜鳥。 這是我的頁面的連結：https://lovely-croissant-3cceca.netlify.app/

我嘗試用 CSS 修復它，但當我更改某些內容時它不再「反應」。類別頁面中的移動視圖，圖像太高。但是，當我嘗試在媒體查詢中降低它們時，桌面版本也會發生變化。我知道這可能是我在嘗試 javascript 時所做的事情。我也無法將名稱“test”更改為其他名稱，因為一切都會受到干擾......

Answer 1

重要的是輸出，而不是透過 API 呼叫圖像，我們可以使用 CSS 來處理結果。

電影標題將影像壓低，因為它們在同一個容器中，所以我們必須給予它們高度。

圖像的比例不同，因此您可以使用object-fit: cover 以最小圖像高度的最大尺寸裁剪圖像。

在行動裝置上：您需要將overflow設定為visible，並從.container-中取出padding child 也是如此（否則會有多個額外的空格），並且僅添加到父級。

像這樣的事情，會做到：

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