API 호출에서 이미지를 조정하는 방법은 무엇입니까?

Question

여기에 글을 올리는 것은 이번이 처음이므로 누락된 내용이 있으면 알려주세요! 좋아요, 제 문제는 카테고리 페이지의 이미지가 서로 맞지 않고 더 이상 정렬되지 않는다는 것입니다. JavaScript를 조금 배우고 API 호출에서 이미지를 얻은 후에 이런 일이 발생했습니다. 이제는 더 이상 좋아 보이지 않습니다. 특히 모바일 보기에서는 더욱 그렇습니다. 어떻게 하면 같은 크기로 만들 수 있나요? 그런데, 나는 완전히 멍청한 놈입니다. 내 페이지 링크는 다음과 같습니다: https://lovely-croissant-3cceca.netlify.app/

CSS로 수정해 보았지만 뭔가를 변경할 때 더 이상 "반응"하지 않습니다. 카테고리 페이지의 모바일 보기, 이미지가 너무 큽니다. 그런데 미디어 쿼리에서 낮추려고 하면 데스크톱 버전도 바뀌네요. 나는 이것이 아마도 내가 자바스크립트를 실험할 때 하고 있는 일이라는 것을 알고 있습니다. 또한 모든 것이 중단될 것이기 때문에 "테스트"라는 이름을 다른 이름으로 변경할 수 없습니다...

Answer 1

중요한 것은 출력입니다. API를 통해 이미지를 호출하는 대신 CSS를 사용하여 결과를 처리할 수 있습니다.

동일한 컨테이너에 있기 때문에 영화 제목이 이미지를 아래로 밀어내므로 높이를 지정해야 합니다.

이미지는 비율이 다르므로 object-fit: cover를 사용하여 최소 이미지 높이로 최대 크기로 이미지를 자를 수 있습니다.

모바일 기기: overflow设置为visible，并从.container-中取出padding child도 추가해야 하며(그렇지 않으면 추가 공백이 여러 개 발생함) 상위 항목에만 추가해야 합니다.

다음과 같은 작업이 가능합니다:

으아악