画像を正方形にして2x2で並べたい

Question

前提・実現したいこと

ec-cube4系のカスタマイズをしています。
商品をカテゴリ毎に４つ取得し、商品画像を正方形にトリミングして2x2で並べたいのですが、画像をボックスの幅いっぱいにすることができず詰まっています。

該当のソースコード

<div class="card">
  <div class="product">
    <a><img></a>
  </div>
  <div class="product">
    <a><img></a>
  </div>
  <div class="product">
    <a><img></a>
  </div>
  <div class="product">
    <a><img></a>
  </div>
</div>

.card {
  display: flex;
  flex-wrap: wrap;
}
.product {
  flex-basis: 50%;
}
.card::before {
  content: "";
  padding-top: 50%;

試したこと

このような方針で実装しようとしているのですが、ここから画像を縦横比を保ったまま、ボックスいっぱいに拡大もしくは縮小する（真ん中でトリミング）にはどうしたら良いかわかりません。

cssだけで実装するのではなくjsも使用するのがよいのでしょうか？説明下手で申し訳ありませんが、どうか回答よろしくお願いします。

追記

回答ありがとうございます。
object-fitも試してみたのですが、正方形の一辺の大きさを画面幅に合わせて変化させたいため、imgにwidthとheightを指定したくありません。その上でobject-fitを試しても効かない？ようなのです。

Comments

[yoshinavi]

画像のトリミングはCSSで行うのでしょうか？

[gyuta]

cssで完結できるようならcssで行いたいです

Answer 1

object-fitでも可能です。

img {
  width: 250px; //<-縦幅
  height: 250px; //<-横幅
  object-fit: cover
}

それとも要素いっぱいにする方法がわからないのでしょうか？

Comments

[kyoya0819]

低評価を押されるなら理由をお教えください。（見当はついていますけど）

[gyuta]

すいません、低評価を押した覚えはないです。そもそも機能が解放されてない？です
わざわざ回答していただきありがとうございました

[kyoya0819]

すみません。質問者さんでないことはわかっておりました。
（低評価の解放は一定以上の質問や回答などの実績が必要になります）
勘違いさせてしまい申し訳ございません。

Answer 2

object-fitを使ってみては？