如何适应 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;
       }
    }