html - ReactJS を使用して HTML および CSS の div に画像を適切に合わせる方法

Question

船の画像の小さなデータベースを完成させようとしています。下のスクリーンショットからわかるように、css クラスを特定の幅に修正したにもかかわらず、カードのサイズがすべて異なるという問題があります。すべてのカードを同じ幅と高さにしようとしています。私は何を間違っていますか？

この問題に関連するコードのスニペットの下:

船舶.js

export default function Vessel({ vessel }) {
    const { name, slug, images /* size */ } = vessel;

    return (
        <div>
        <article className="room">
            <div className="img-container">
                <img src={images[0] || defaultImg} alt="single" />
                <Link to={`/vessels/${slug}`} className="btn-primary">
                    Features
                </Link>
            </div>
        </article>
        </div>
    );
}

関連するApp.cssクラス:

.room {
    display: block;
    box-shadow: var(--lightShadow);
    transition: var(--mainTransition);
}    
.img-container {
    position: relative;
}
.img-container img {
    width: 100%;
    display: block;
    transition: var(--mainTransition);
}

私がこれまでに行ったこと：

1. なぜそれが起こっているのかという問題を調査して理解しようとしましたが、何が間違っているのか理解できませんでした。私はこの情報源を調べましたが、これはかなり明確なようです。私が申請した結果は、私が投稿した画像のものです。

2. CSSにプロパティを追加しようとしheightましたが、問題は変わりませんでした

   .img-container img { 幅: 100%; 高さ: 100%; 表示ブロック; トランジション: var(--mainTransition); }

3. ある時点で、それは可視性の問題ではないかと疑っていましたが、それでも問題は変わりませんでした。そして視認性の問題ではないと思います。

上書きできる（おそらく？）プロパティがあるように思えますか？あるいは、それは問題ではないかもしれません。この問題を解決する方法について正しい方向を示してくれてありがとう。