ECサイト｜不揃いな商品サムネイルをCSSで同じ比率・サイズに統一させる方法

ホーム
CSS
ECサイト｜不揃いな商品サムネイルをCSSで同じ比率・サイズに統一させる方法

2018.12.9

ECサイト｜不揃いな商品サムネイルをCSSで同じ比率・サイズに統一させる方法

ECサイトなどで商品をリスト表示させたときに、画像の比率がバラバラなためにきれいに揃わないことってありますよね。そんなときに、画像を一つ一つ編集しなくても、CSSだけで調整できたら便利だと思いませんか？

ここでは、そんな方におすすめのobject-fitプロパティを使って不均等な画像サイズを一発でキレイに合わせる（トリミング）する方法についてお話します。

object-fitプロパティの使い方

object-fitプロパティの使い方はめっちゃ簡単です。画像に対して、サイズと一緒にobject-fit: cover;を追加するだけです。例えば、こんな感じ。

img{
  width: 180px;
  height: 180px;
  object-fit: cover;
}

とりあえず実装してみたいという方は、このように画像にobject-fit: cover;を指定してみてください。それだけですべてが解決するはずです。

実例：商品リストのサンプル

例えば、下記のような商品リストを作っていたとしましょう。

ボタンで表示を切り替えてご覧ください。

See the Pen object-fit01 by kenichi (@ken81) on CodePen.

HTML

<ul class="item_list">
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
</ul>

CSS

ul.item_list{
  list-style: none;
  padding: 0;
}
ul.item_list li{
  padding: 0;
  width: calc( 25% - ( 30px / 4 ));
  float: left;
}
ul.item_list li{
  margin-left: 10px;
}
ul.item_list li:nth-child(4n + 1){
  margin-left: 0;
}
ul.item_list li img{
  border: 1px solid #ddd;
  width: 100%;
}
ul.item_list::after{
  display: block;
  clear: both;
  content: "";
}
.price{
  color: red;
}
.price::after{
  content: "円";
}

同じ画像を使っているので、今は画像がちゃんと並んでくれていますが、ここに比率の異なる画像を入れるとどうなるでしょうか？

See the Pen object-fit02 by kenichi (@ken81) on CodePen.

こんな感じで、変なところで商品リストが改行されてしまいます。これを改善するには、imgタグに対するプロパティを次のように変えます。

ul.item_list li img{
  border: 1px solid #ddd;
  width: 100%;
}

ul.item_list li img{
  border: 1px solid #ddd;
  width: 100%;
  height: 160.5px;
  object-fit: cover;
}

↑高さとobject-fitプロパティを追加しただけです。

See the Pen object-fit03 by kenichi (@ken81) on CodePen.

それだけで、商品リストがキレイに揃いました。

ポイントは、画像に対してheightを指定して、object-fit: cover;を１行追加すること。そして、このときに指定する高さは、ブラウザを最大化したときの画像の理想的な高さを指定することです。

object-fitプロパティのデメリット

object-fitプロパティを使った画像の調整方法はとても簡単で良いのですが、１つだけデメリットがあります。それは、ブラウザの幅によって商品画像の比率が変化してしまう点です。

細かい点を気にしない方はこれでも良いと思いますが、画像のトリミングサイズ比率を固定させたいという方は、下記ように指定してみてください。

See the Pen object-fit04 by kenichi (@ken81) on CodePen.

HTML

<ul class="item_list">
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    </div>
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item04.jpg">
    </div>
    <div>ロボット</div>
    <div class="price">2,000</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item03.jpg">
    </div>
    <div>おもちゃセット</div>
    <div class="price">2,500</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item01.jpg">
    </div>
    <div>積み木</div>
    <div class="price">1,500</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item02.jpg">
    </div>
    <div>飛行機</div>
    <div class="price">1,200</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item04.jpg">
    </div>
    <div>ロボット</div>
    <div class="price">2,000</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item03.jpg">
    </div>
    <div>おもちゃセット</div>
    <div class="price">2,500</div>
  </li>
  <li>
    <div class="img_wrap">
      <img src="https://cotodama.co/wp-content/uploads/2018/12/item01.jpg">
    </div>
    <div>積み木</div>
    <div class="price">1,500</div>
  </li>
</ul>

CSS

ul.item_list{
  list-style: none;
  padding: 0;
}
ul.item_list li{
  padding: 0;
  width: calc( 25% - ( 30px / 4 ));
  float: left;
}
ul.item_list li .img_wrap{
  width: 100%;
  padding-top: 100%;
  position: relative;
}
ul.item_list li{
  margin-left: 10px;
}
ul.item_list li:nth-child(4n + 1){
  margin-left: 0;
}
ul.item_list li .img_wrap img{
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
ul.item_list::after{
  display: block;
  clear: both;
  content: "";
}
.price{
  color: red;
}
.price::after{
  content: "円";
}

上記のポイントは、imgタグをdivでラップしてサイズ比率を固定するための枠を作り、そこに画像をはめ込んでいる点です。このスタイルシートの仕組みはちょっとややこしいので、しっかりお話しようとするとかなり長文になってしまうので、また次の機会にしようと思います。

一応、ヒントとなる記事が下記にありますので、謎解きをしたい方は参考にしてみてください。

2017.10.22

アイフレームをスマホ対応させる方法

ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペして...

以上が、不揃いな画像をCSSで同じ比率・サイズに統一させる方法でした。

商品サムネイルにCSSでラキングの王冠画像を重ねて表示させる方法

カスタム投稿タイプでアイキャッチが有効にならない時の２つのチェックポイント

WordPressとデザインが学べるWebメディア