object-fitを適用しても画像の大きさが揃わない

Question

グリッドレイアウトの画像の大きさをすべて均等に揃えたいのですが高さ、横幅を指定した後object-fitを適用しても画像のようになってしまいます。
画像を囲んでいるdiv要素は検証ツールで見ると均等なのですが画像も均等にする方法はあるでしょうか。
よろしくお願いいたします。

 <section id="Style" class="style">
        <h1>Style</h1>
        <div class="style_box">
            <div class="style_item"><img src="images/style1.jpg"></div>
            <div class="style_item"><img src="images/style2.jpg"></div>
            <div class="style_item"><img src="images/style3.jpg"></div>
            <div class="style_item"><img src="images/style4.jpg"></div>
            <div class="style_item"><img src="images/style5.jpg"></div>
            <div class="style_item"><img src="images/style6.jpg"></div>
        </div>
    </section>

.style{
    padding-top: 30px;
}

.style_box{
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 300px;
    gap: 30px;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;
}

.style-item{
   background-color: #666;
}

 .style-item img{
    object-fit: cover;
    width: 300px;
    height: 300px;
}

Answer 1

.style-item->.style_item

Comments

[kk12]

確認不足でした。
すみません...