商品写真やプロフィール写真などの一覧ページで、DBから引っ張ってきた縦長横長どちらかわからない画像を全て同じ矩形内にピッタリ表示を揃えたい場合、案外面倒ですよね・・・

最近これが必要な案件が立て続けにあったので後々楽できるようにjQueryプラグインにしておきました。

異なる画角の画像を均等なサイズで表示させる方法

バラバラのサイズの画像をとある矩形の横幅いっぱいに揃えて表示する場合、max-widthで横幅と、あとheight: autoを指定しておくのが一番手っ取り早いのですが、想定外の横長の画像とかが入って来ると下に余白ができてしまいます。

静的なページではある程度画像サイズを均一にしておくなどしていくらでも対応可能なのですが、動的なページ制作の場合では、バラバラの画角の画像が入ってくる事も想定されるので、思った通りの表示にならない事が多いです。

なのでCSSで綺麗に表示を整えようと思ったらimg要素の大きさを変える方法では無くて、親の要素に背景画像として指定してやる必要があります。

これならどんな大きさの画像が入っても中心から縦横どちらかの最大幅で矩形内に一杯一杯に表示させてくれます。

CSS内に画像のパスを書きたくないのでJSでHTMLを書き換える

前述の方法を使用するとcssの中に画像のパスを指定するか、もしくはbackground-imageだけHTMLに直書きするかしなければならないので、通常リストで画像を並べる時と比べてマークアップが大きく異なってしまい、後から入るデザインの修正に対してあまり柔軟では無くなってしまいます。

cssに複数の画像のパスを入れるのは面倒そうなのでやるとしたらhtmlを書き換えてこんな感じになるかと思われます。

でも、できればHTMLの文章構造はデザインに依存しない方が良い気がするのでいつも通りこうやって書いておきたいですよね・・・

理想としてはマークアップは従来通りliタグなどに入ったimgタグのままの記載しておきたいのですが、このマークアップの状態で画像をフィットさせようと思ったら現状ではobject-fitくらしか方法が無いと思うのですが、それだとchromeくらいでしかまともに表示されないサイトになってしまいます。

ので、やはりここは一部jsで工夫して表示させる必要があります。

jsでimgの画像のパスをbackground-imageに書き直そうと思ったら
入れ子になっているimg要素から画像のパスを取得して、liタグに直接cssを指定すれば良いだけです。

これでcssファイルの中に画像のパスを書く事を回避できました。

jQueryプラグインにしておいた

毎回おんなじjs書くのも面倒なのでjQueryプラグインに纏めておきました。
jsでcssを書くのはあんまり好きでは無いのですが、この場合にはbackground-imageの部分は結局js上で書く事になるし1行も4行もそんなに変わらないかなと思ったので必要最低限のCSSだけはjsで指定しています。

リポジトリ
デモ

こんな感じで呼び出します。

横幅と縦幅は親要素のサイズに合うようになっているので指定はいらないのですが、jsからも指定できるようになっています。

画像を背景で表示するように変更するので元のimg要素がいらなくなり、非表示にする必要があるのですが、このプラグインではdisplay: noneにせずにopasity: 0にしています。¹

あとサムネイルに使っている猫画像はplacekitten.comというURLで指定したサイズの画像を返してくれるWEBサービスを使用しています。

単に画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。

WordPressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。

で、画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。

まずは見えないcanvasを作成して、

画像のロード後に見えないcanvasに一旦貼付けてそこからgetImageDataを使用して色を取り出し、配列に格納します。

で、毎フレームの処理で、先ほどの配列から色を取り出します。

毎フレームの処理で画像から色を取得してしまうと激重になってしまうので注意が必要です。

色が華やかになってきた事だしそろそろ当初の予定通り撮ってきた写真とかをアップする気楽なブログとしても活用していこう・・・

ドロネー図。2年前くらいにStrataの一連のシリーズを見てからずっとアルゴリズムが気になってたので、ちょっと時間ができた隙に調べてjavascriptで動かしてみた。これであってるかどうかわからないし、Strataはさらにここから3Dになるので全然違うんだけど、なんとなくこういう仕組みだったのかなぁと思えるくらいにはなれたので非常に勉強になった。

非表示にしているけど後ろに敷いている画像はこんな感じです。¹

jsで画像から色を取得する方法とかも知らなかったけどやってみたら案外なんとかなったので良かった。

動かしてから、もしや・・・と思ってググったら、既にD3というライブラリで簡単に実現できる事を見つけてしまった。

Delaunay Triangulation

これを使えばたったこれだけでできたみたい。

どうでも良いけどドロネー図もボロノイ図も何度覚えてもボロネーゼで上書きされて名称を忘れてしまう。ボロネーゼ。なんとかしたい。

一体どこに需要があるかわからないけど次のiPhoneアプリはカメラアプリにしよう。名前はボロネーゼカメラにしよう。