Wie passt man Bilder in API-Aufrufen an?

Question

Dies ist das erste Mal, dass ich hier etwas poste. Wenn ich also etwas vermisse, lassen Sie es mich bitte wissen! Ok, mein Problem ist also, dass die Bilder auf der Kategorieseite nicht zueinander passen und nicht mehr ausgerichtet sind. Dies geschah, nachdem ich ein wenig JavaScript gelernt und Bilder aus API-Aufrufen erhalten hatte. Jetzt sehen sie nicht mehr so ​​gut aus...besonders in der mobilen Ansicht. Wie kann ich sie auf die gleiche Größe bringen? Übrigens, ich bin ein absoluter Neuling. Hier ist der Link zu meiner Seite: https://lovely-croissant-3cceca.netlify.app/

Ich habe versucht, das Problem mit CSS zu beheben, aber es „reagiert“ nicht mehr, wenn ich etwas ändere. Mobile Ansicht auf der Kategorieseite, Bild zu hoch. Wenn ich jedoch versuche, sie in der Medienabfrage zu senken, ändert sich auch die Desktop-Version. Ich weiß, dass ich das wahrscheinlich mache, wenn ich mit Javascript experimentiere. Ich kann den Namen „Test“ auch nicht in etwas anderes ändern, da sonst alles gestört wird...

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