如何适应 api 调用中的图像？

Question

我第一次在这里发布任何内容，如果我遗漏了什么，请告诉我！好的，所以我的问题是类别页面中的图像彼此不适合并且不再对齐。这是在我学习了一点JavaScript并从API调用中获取图像之后发生的。现在它们看起来不再那么好......尤其是在移动视图中。我怎样才能使它们的尺寸相同？顺便说一句，我完全是一个菜鸟。这是我的页面的链接：https://lovely-croissant-3cceca.netlif

P粉848442185 · Answer

重要的是输出，而不是通过 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;
       }
    }