CSS

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;を1行追加すること。そして、このときに指定する高さは、ブラウザを最大化したときの画像の理想的な高さを指定することです。

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

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

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

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

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

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

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP