我第一次在這里張貼任何東西，所以如果我錯過了什么，請告訴我！好的，我的問題是我的分類頁面中的圖片彼此不匹配，不再對齊。這發(fā)生在我學(xué)習(xí)了一點javascri pt并從API調(diào)用中獲得圖像之后。現(xiàn)在它們看起來不再那么好了...尤其是在移動視圖中。我怎樣才能讓它們都一樣大呢？順便說一句，我完全是個新手。 這是我頁面的鏈接:https://lovely-croissant-3cceca.netlify.app/

我試著用CSS修復(fù)它，但是它不& quot反應(yīng)& quot當(dāng)我改變什么的時候。類別頁面的移動視圖中，圖像太高。但是當(dāng)我在媒體查詢中嘗試降低它們時，桌面版本也發(fā)生了變化。當(dāng)我嘗試javascript時，我知道它可能與I馬德有關(guān)。我也不能改變名字& quot測試& quot因為一切都被擾亂了...

重要的是輸出，而不是圖像是通過API調(diào)用的，我們可以用CSS處理結(jié)果。

電影標(biāo)題將圖像向下推，因為它們在同一個容器中，所以我們必須給它們一個高度。

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

在mobile上:您需要將溢出設(shè)置為可見，并從。container-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;
       }
    }