質問編集履歴

1 追記

gyuta

gyuta score 0

2019/09/14 13:50  投稿

画像を正方形にして2x2で並べたい
### 前提・実現したいこと
ec-cube4系のカスタマイズをしています。
商品をカテゴリ毎に4つ取得し、商品画像を正方形にトリミングして2x2で並べたいのですが、画像をボックスの幅いっぱいにすることができず詰まっています。
### 該当のソースコード
```html
<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>
```
```css
.card {
 display: flex;
 flex-wrap: wrap;
}
.product {
 flex-basis: 50%;
}
.card::before {
 content: "";
 padding-top: 50%;
```
### 試したこと
このような方針で実装しようとしているのですが、ここから画像を縦横比を保ったまま、ボックスいっぱいに拡大もしくは縮小する(真ん中でトリミング)にはどうしたら良いかわかりません。
cssだけで実装するのではなくjsも使用するのがよいのでしょうか?説明下手で申し訳ありませんが、どうか回答よろしくお願いします。
cssだけで実装するのではなくjsも使用するのがよいのでしょうか?説明下手で申し訳ありませんが、どうか回答よろしくお願いします。
### 追記
回答ありがとうございます。
object-fitも試してみたのですが、正方形の一辺の大きさを画面幅に合わせて変化させたいため、imgにwidthとheightを指定したくありません。その上でobject-fitを試しても効かない?ようなのです。
  • CSS3

    3178 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6229 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • EC-CUBE

    346 questions

    EC-CUBEは、主に日本国内で開発されているECコンテンツ管理システムです。ロックオン社のECKitを元にしてオープンソース化され、商品管理・受注管理・顧客管理・売上集計などECに特化した様々な機能を備えています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る