横長や縦長の画像を正方形に表示したいって事がありますよね。
今回は横長(縦長)の画像をCSSで正方形にトリミングする方法をまとめてみました。
スポンサードリンク
動的なサイト運用には必須なCSS画像トリミング
最近はオウンドメディアやキュレーション系のメディアなどの記事コンテンツサイトが増えてきたので、動的な画像処理が必要になることが多くなりました。
昔は画像を一枚一枚正方形にトリミングするか、縦横比（アスペクト比）を考えずに無理矢理正方形にするしかなかったのですが、CSS3からはその必要がなくなったんです。
CSSトリミングのメリットとデメリット
まずはメリットとデメリットをまとめてみました。
メリット
メリットは以下のとおりです。
- 画像を1枚ずつ正方形にトリミングする必要がなくなる
- 元の画像サイズ（縦横比）がバラバラでも見た目が統一される
数百記事、数千記事規模のオウンドメディアを運用する為にはできるだけ手間を省いた運用が必要なので、サムネイルの為だけに毎回トリミングしないで済むのは大きなメリットだと思います。
デメリット
デメリットは以下のとおりです。
- 最低限の画像サイズが必要になる
- 希望の位置でトリミングするにはCSSの調整が必要
100px x 100px の正方形を表示したいのに、元画像のサイズが100px x 50x だと空白部分ができてしまいます。
最低限の画像サイズは必要という事ですね。
実際にCSSで画像をトリミングしてみる
今回使用したのは670px(横) x 400px(縦)の画像です。
そのままトリミングする
まずは単純にトリミングしてみます。
html
|
1 2 3 |
<div class="sample1"> <img width="670" height="400" src="common/img/css_triming001.jpg"> </div> |
css
|
1 2 3 4 5 |
.sample1 { overflow: hidden; width: 400px; height: 400px; } |
ブラウザで確認すると「正方形」になっている事がわかると思います。
でも、これだと左に寄ってしまっていますよね。
なので、センターに標準を合わせます。
画像をセンターで正方形にトリミングする
以下のようにすると、センターでトリミングされます。
html
|
1 2 3 |
<div class="sample2"> <img width="670" height="400" src="common/img/css_triming001.jpg"> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample2 { overflow: hidden; width: 400px; height: 400px; position: relative; } .sample2 img{ position: absolute; top:50%; /* または200px(heightの半分) */ left: 50%; /* この値を変更すると左右に位置をずらせる */ transform: translate(-50%, -50%); } |
topの位置やleftの位置を微調整する事によって、自分の希望の場所でトリミングをする事ができます。
しかし、オウンドメディアのようにCMSを使ったサイトで使用する場合は、同じクラスを使う事が多いので、一つ一つ調整をする事は少ないと思います。
なので、センターでトリミングするのが一般的かなと思います。
CMSで記事から吐き出される画像によっては希望の位置でトリミングされないものも出てきますが、そこはグッとこらえるしかありません。
記事内で使用する画像のメイン部分をできるだけセンターに持っていっておくように意識しておくのがよいと思います。
まとめ
いかがだったでしょうか？
ワードプレスやMovableTypeなどのCMSを使ったサイトがどんどん増えて来ているので、このようなCSSテクニックは非常によく使うんですよね。
気になる方は実際に試してみてくださいね。
スポンサードリンク
