ECサイトなどで商品をリスト表示させたときに、画像の比率がバラバラなためにきれいに揃わないことってありますよね。そんなときに、画像を一つ一つ編集しなくても、CSSだけで調整できたら便利だと思いませんか？
ここでは、そんな方におすすめのobject-fitプロパティを使って不均等な画像サイズを一発でキレイに合わせる（トリミング）する方法についてお話します。
object-fitプロパティの使い方
object-fitプロパティの使い方はめっちゃ簡単です。画像に対して、サイズと一緒にobject-fit: cover;を追加するだけです。例えば、こんな感じ。
img{ |
width: 180px; |
height: 180px; |
object-fit: cover; |
} |
とりあえず実装してみたいという方は、このように画像にobject-fit: cover;を指定してみてください。それだけですべてが解決するはずです。
実例：商品リストのサンプル
例えば、下記のような商品リストを作っていたとしましょう。
ボタンで表示を切り替えてご覧ください。
HTML
<ul class="item_list"> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<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: "円"; |
} |
同じ画像を使っているので、今は画像がちゃんと並んでくれていますが、ここに比率の異なる画像を入れるとどうなるでしょうか？
こんな感じで、変なところで商品リストが改行されてしまいます。これを改善するには、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プロパティを追加しただけです。
それだけで、商品リストがキレイに揃いました。
ポイントは、画像に対してheightを指定して、object-fit: cover;を１行追加すること。そして、このときに指定する高さは、ブラウザを最大化したときの画像の理想的な高さを指定することです。
object-fitプロパティのデメリット
object-fitプロパティを使った画像の調整方法はとても簡単で良いのですが、１つだけデメリットがあります。それは、ブラウザの幅によって商品画像の比率が変化してしまう点です。
細かい点を気にしない方はこれでも良いと思いますが、画像のトリミングサイズ比率を固定させたいという方は、下記ように指定してみてください。
HTML
<ul class="item_list"> |
<li> |
<div class="img_wrap"> |
</div> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>ロボット</div> |
<div class="price">2,000</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>おもちゃセット</div> |
<div class="price">2,500</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>積み木</div> |
<div class="price">1,500</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>飛行機</div> |
<div class="price">1,200</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>ロボット</div> |
<div class="price">2,000</div> |
</li> |
<li> |
<div class="img_wrap"> |
</div> |
<div>おもちゃセット</div> |
<div class="price">2,500</div> |
</li> |
<li> |
<div class="img_wrap"> |
</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で同じ比率・サイズに統一させる方法でした。
