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 を削除する必要があります。これは True (それ以外の場合)複数の余分なスペースが存在します) が親にのみ追加されます。

次のようなことが行われます:

リーリー